Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，DOM节点有:
　　1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
　　2. 文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
　　3. 属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

前两个是document方法。

例：通过getElementById获取id为con的h2标签。修改h2标签的样式，将颜色设为红色。修改h2标签的样式，将背景颜色设为灰色(#CCC)。通过style.display实现隐藏。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>style样式</title>
 6 </head>
 7 <body>
 8     <h2 id="con">I love JavaScript</H2>
 9     <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
10     <script type="text/javascript">
11         var tite = document.getElementById("con");
12         tite.style.color = "red";
13         tite.style.backgroundColor = "#ccc";
14         tite.style.display = "none";
15     </script>
16 </body>
17 </html>

getElementsByName()方法
返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
　　1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
　　2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

例：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     function getnum(){
 6         var mynode = document.getElementsByName("myt");  
 7         alert(mynode.length);
 8     }
 9 </script>
10 </head>
11 <body>
12     <input name="myt" type="text" value="1">
13     <input name="myt" type="text" value="2">
14     <input name="myt" type="text" value="3">
15     <input name="myt" type="text" value="4">
16     <input name="myt" type="text" value="5">
17     <input name="myt" type="text" value="6">
18     <br />
19     <input type="button" onclick="getnum()" value="看看有几项？" />
20 </body>
21 </html>

运行结果：

getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

通过getElementsByTagName()获取节点：

使用三种获取节点的方法:

 1 <!DOCTYPE HTML>
 2 <html>  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
 5 <title>JavaScript</title>  
 6 </head>  
 7 <body>  
 8     <form name="Input">
 9         <table align="center" width="500px" height="50%" border="1">
10             <tr>
11                 <td align="center" width="100px">
12                     学号:
13                 </td>
14                 <td align="center" width="300px">
15                     <input type="text" id=userid name="user" onblur="validate();">
16                     <div id=usermsg></div>
17                 </td>
18             </tr>
19             <tr>
20                 <td align="center" width="100px">
21                     姓名:
22                 </td>
23                 <td align="center">
24                     <input type="text" name="name">
25                 </td>
26             </tr>
27             <tr>
28                 <td align="center" width="%45">
29                     性别:
30                 </td>
31                 <td align="center">
32                     <input type="radio" name="sex" value="男">
33                         男
34                     <input type="radio" name="sex" value="女">
35                         女
36                 </td>
37             </tr>
38             <tr>
39                 <td align="center" width="30%">
40                     年龄:
41                 </td>
42                 <td align="center" width="300px">
43                     <input type="text" name="age">
44                 </td>
45             </tr>
46             <tr>
47                 <td align="center" width="100px">
48                     地址:
49                 </td>
50                 <td align="center" width="300px">
51                     <input type="text" name="addr">
52                 </td>
53             </tr>
54         </table>
55     </form>
56     <h1 id="myHead" onclick="getValue()">
57         看看三种获取节点的方法?
58     </h1>
59     <p>
60         点击标题弹出它的值。
61     </p>
62     <input type="button" onclick="getElements()"value="看看name为sex的节点有几个?" />
63     <br/>
64     <input type="button" onclick="getTagElements()"value="看看标签名为input的节点有几个?" />
65     <script type="text/javascript">
66         function getValue(){
67             var myH = document.getElementById("myHead");
68             alert(myH.innerHTML)
69         }
70 
71         function getElements(){
72             var myS = document.getElementsByName("sex");
73             alert(myS.length);
74         }
75 
76         function getTagElements(){
77             var myI = document.getElementsByTagName("input")
78             alert(myI.length);
79         }
80     </script>
81 </body>
82 </html>

区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
　　1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
　　2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
　　3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中如下:

<input type="checkbox" name="hobby" id="hobby1"> 音乐

input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。

方法总结如下:（方法区分大小写）

通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:

1 <input type="checkbox" name="hobby" id="hobby1">  音乐
2 <input type="checkbox" name="hobby" id="hobby2">  登山
3 <input type="checkbox" name="hobby" id="hobby3">  游泳
4 <input type="checkbox" name="hobby" id="hobby4">  阅读
5 <input type="checkbox" name="hobby" id="hobby5">  打球
6 <input type="checkbox" name="hobby" id="hobby6">  跑步 
7 <input type="button" value = "全选" id="button1">
8 <input type="button" value = "全不选" id="button1">

1 document.getElementsByTagName("input"); //结果为获取所有标签为input的元素，共8个。
2 
3 document.getElementsByName("hobby"); //结果为获取属性name="hobby"的元素，共6个。
4 
5 document.getElementById("hobby6"); //结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

实现当点击"全选"按钮时，将选中所有的复选项。实现当点击"全不选"按钮时，将取消所有选中的复选项。在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>无标题文档</title>
 6 </head>
 7 <body>
 8     <form>
 9       请选择你爱好:<br>
10       <input type="checkbox" name="hobby" id="hobby1">  音乐
11       <input type="checkbox" name="hobby" id="hobby2">  登山
12       <input type="checkbox" name="hobby" id="hobby3">  游泳
13       <input type="checkbox" name="hobby" id="hobby4">  阅读
14       <input type="checkbox" name="hobby" id="hobby5">  打球
15       <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
16       <input type="button" value = "全选" onclick = "checkall();">
17       <input type="button" value = "全不选" onclick = "clearall();">
18       <p>请输入您要选择爱好的序号，序号为1-6:</p>
19       <input id="wb" name="wb" type="text" >
20       <input name="ok" type="button" value="确定" onclick = "checkone();">
21     </form>
22 
23     <script type="text/javascript">
24         function checkall(){
25             var hobby = document.getElementsByTagName("input");
26 
27             for(i = 0; i < hobby.length; i++){
28                 if(hobby[i].type == "checkbox"){
29                     hobby[i].checked = true;
30                 }
31             } 
32         }
33         function clearall(){
34           var hobby = document.getElementsByName("hobby");
35 
36           for(i = 0; i < hobby.length; i++){
37               if(hobby[i].type == "checkbox"){
38                   hobby[i].checked = false;
39               }
40           }
41         }
42 
43         function checkone(){
44             var j=document.getElementById("wb").value;
45 
46             var hobby = document.getElementById("hobby" + j);
47             
48             hobby.checked = true;
49         }
50     </script>
51 </body>
52 </html>