学习内容：

1.document对象

2.event对象

该对象将标记型文档进行封装
该对象的作用，是对可标记型文档进行操作
常见操作，想要实现动态效果，需要对节点操作，那么先获取到这个节点，想获取节点，就必须先获取节点所属的文档对象document
获取节点的方法体现：
getElementById();提高标签的id属性值获取该标签节点，返回该标签节点
getElementsByName();通过标签的name属性获取节点，返回的是一个数组/容器

getElementsTagName();通过标签名获取节点，因为标签名会有重复，所以返回一个数组

在操作文档时为了获取某一个特定的元素，getelementById方法是最好的选择...

<html>

<head>

<script type="text/javascript">

function getValue()

  {

  var x=document.getElementById("myHeader")

  alert(x.innerHTML)//修改h1所显示的标题...

  }

</script>

</head>

<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>

<p>Click on the header to alert its value</p>

</body>

</html>

当我们在执行多次的getelementById方法时，我们可以定义一个方法，使其返回getelementById方法，这样可以避免

在每次调用的时候，都书写其方法，解决了代码冗余...

function id(x) {

  if (typeof x == "string") return document.getElementById(x);

  return x;

  }

getElementByName（）与getelementById方法相似，但是他查询的是name，而不是id属性...

<html>

<head>

<script type="text/javascript">

function getElements()

  {

  var x=document.getElementsByName("myInput");

  alert(x.length);

  }

</script>

</head>

<body>

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />

</body>

</html>

getElementsByTagName（） 返回一个指定标签的集合...

<html>

<head>

<script type="text/javascript">

function getElements()

  {

  var x=document.getElementsByTagName("input");

  alert(x.length);

  }

</script>

</head>

<body>

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()"

value="How many input elements?" />

</body>

</html>

可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如，下面的代码可获取文档中所有的表：

var tables = document.getElementsByTagName("table");

alert ("This document contains " + tables.length + " tables");

也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。

<script type="text/javascript">

        function getNodeByTagNameDemo2(){

                var divNode = document.getElementById("newlink");

                var nodes = divNode.getElementsByTagName("a");//nodes成为了一个数组，存放着多个a属性...

                for(var i = 0;i<nodes.length;i++){

                    nodes[i].target="_blank";

                }

        }

    </script>

    <input type="button" value="document对象获取节点" onclick="getNodeByTagNameDemo2()"/>

    <a href="http://www.baidu.com">百度1</a>

    <a href="http://www.baidu.com">百度2</a>

    <div id="newlink">

        <a href="http://www.163.com">1631</a>

        <a href="http://www.163.com">1632</a>

        <a href="http://www.163.com">1633</a>

    </div>

2.event对象..

事件绑定：

第一种方式

<html>

<head>

<script type="text/javascript">

        function text(){

              window.alert("hello");

        }

</script>

</head>

<body>

        <input type="button" value="直接绑定方式" onclick="test()"/>

</body>

</html>

第二种方式：

通过getelementById方法获取元素后再监听绑定

<html>

<head>

<script language=”javascript”

Function test()

{

Document.write("hello");

}

</script>

</head>

<body>

        <input type=”button” id=”ID名称” value=”刷新界面”/>

<script>

          Document.getElementById(“ID名称”).onClick=test;//只能绑定在这，绑定在前面会报错。。。

</script>

</body>

</html>

DOM编程 学习笔记（二）的更多相关文章

  1. HTML DOM（学习笔记二）

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

  2. DOM编程 学习笔记（一）

    PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...

  3. linux shell编程学习笔记(二) --- grep命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  4. FFmpeg编程学习笔记二：音频重採样

    ffmpeg实现音频重採样的核心函数swr_convert功能很强大,但是ffmpeg文档对它的凝视太过简单.在应用中往往会出这样那样的问题,事实上在读取数据->重採样->编码数据的循环中 ...

  5. 【Linux_Shell 脚本编程学习笔记二、打印菜单】

    综合实例: 打印选择菜单,一键安装Web服务 [root@zuoyan   script]# sh menu.sh 1.[install  lamp] 2. [install lnmp] 3. [ex ...

  6. 多线程编程学习笔记——async和await（二）

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

  7. 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

随机推荐

  1. python中杂乱问题

    1 字符串格式化中的格式指定 format_spec ::= [[fill]align][sign][#][][width][,][.precision][type] fill ::= <any ...

  2. [na][dhcp]华为DHCP-重要

    近日遇到遇到控制器和wac对接的一些问题.尤其是地址池这块排查起来比较费事,且这些命令不容易找到,以下是能经常用到的命令. 1,查看ip是否冲突: (看下conflict字段) 2,防止冲突命令: 3 ...

  3. Azure Cloud Application Design and Implementation Guidance performance-optimization

    https://github.com/mspnp/azure-guidance https://github.com/mspnp/performance-optimization https://gi ...

  4. AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...

  5. LeetCode: Letter Combinations of a Phone Number 解题报告

    Letter Combinations of a Phone Number Given a digit string, return all possible letter combinations ...

  6. python匹配两个字符串中间的字符串

    问题:使用python正则如何匹配两字符串中间的字符串解决:使用re模块的findall,注意,re.match是只能从开头匹配的方法: import re html_str = '</a> ...

  7. 面向对象 之 [C++面试题]

    说到面向对象,大家第一反应应该就是它的三大特性:封装性.继承性和多态性.那么我们先简单的了解一下这三大特性: (1)封装性:封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的 ...

  8. 纯css3实现的文字亮光特效

    今天给大家分享一款纯css3实现的文字亮光特效.这款特效文字上一道亮光逐渐扫过文字.效果非常漂亮.一起看下效果: 在线预览   源码下载 实现的代码. html代码: <span class=& ...

  9. DHCP配置实例

    配置DHCP的思路: 1.创建dhcp服务2.添加一个网络号(或者说地址池)3.排除路由器的网管4.排除DHCP的网关 代码: Router>enableRouter#configRouter# ...

  10. kubernetes master 高可用一键部署

    #地址见:https://github.com/SILLKY/kubernetes-pro/tree/master/Master-HA#包括其他一些文件,适当版本1.6.1#!/bin/bash ho ...