释放双眼，带上耳机，听听看~！
利用节点间的层次关系获取节点：
上一节讲了3中获取的方式：
* ※※一、绝对获取，获取元素的3种方式：—Element
* 1、getElementById(): 通过标签中的id属性值获来取该标签对象
* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
* 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
现在来看看相对获取的方式：
※※二、相对获取(利用节点之间的层次关系)，获取节点：—Node
1、父节点：parentNode–属性
2、子节点：childNodes–集合
3、上一个兄弟节点：previousSibling–属性
4、下一个兄弟节点：nextSibling–属性
5、使用以上属性时，要小心空白符节点(#Text)的存在。对于表格，还要注意有一个隐含的父节点。
*/
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2<head>
3<title>Dom模型演示3---利用节点间的层次关系获取节点</title>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<script type="text/javascript">
6 /*
7 * ※※一、绝对获取，获取元素的3种方式：---Element
8 * 1、getElementById(): 通过标签中的id属性值获来取该标签对象
9 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
10 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
11
12 ※※二、相对获取(利用节点之间的层次关系)，获取节点：---Node
13 1、父节点：parentNode--属性
14 2、子节点：childNodes--集合
15 3、上一个兄弟节点：previousSibling--属性
16 4、下一个兄弟节点：nextSibling--属性
17 5、使用以上属性时，要小心空白符节点(#Text)的存在。对于表格，还要注意<tr>有一个隐含的父节点<tbody>。
18 */
19
20 //通过节点间的层次关系来获取节点
21 function getNodeByLevel() {
22 var tabNode = document.getElementById("table1");
23 //获取父节点
24
25 var node = tabNode.parentNode;
26 //alert(node.nodeName);//BODY,如果是IE6则是：TBODY
27 //alert( tabNode.parentNode.parentNode.nodeName);//HTML
28
29 //获取子节点
30 /*
31 使用childNodes时，需注意几点：
32 1，<table>标签下还隐藏一个<tbody>标签，<tbody>下面才是<tr>
33 2,空白符(空格或换行符)是被看成是一个文本节点的。例如，如果<table>和<tr>之间有换行或空格，则<table>的第一个孩子节点nodeName是：#text
34 3, 上面的<tbody>和#text节点是兄弟关系
35 */
36 //需求：显示出表格中的所有姓名
37 var children = tabNode.childNodes;
38 //alert(children[0].nodeName);//#text
39 //alert(children[1].nodeName);//<tbody>
40 var trNodes = children[1].childNodes;
41 alert(trNodes.length);
42 var str="";
43
44 for(var x=0;x<trNodes.length;x++){
45 //用卫条件把<tr>与<td>之间的空白符过滤掉
46 if(trNodes[x].nodeType==3){
47 continue;
48 }
49
50 //注意，trNodes[x].childNodes[0]是空白符即#text节点，trNodes[x].childNodes[1]才是<td>节点
51 //str=str+trNodes[x].childNodes[1].innerText+" ";
52 //上面是偷懒写法，如果想写得兼容性好些，应该还用for循环遍历strNodes[x]的所有孩子节点且过滤掉#text节点，获取第一个非空白子节点的innerText
53
54
55 for(var i=0;i<trNodes[x].childNodes.length;i++){
56 if(trNodes[x].childNodes[i].nodeType==3){
57 continue;
58 }
59 str=str+trNodes[x].childNodes[i].innerText+" ";
60 break;
61 }
62
63 }
64 alert(str);
65
66 //获取兄弟节点
67
68 //上一个
69 var node = tabNode.previousSibling;
70 alert(node.nodeName);//#text
71 node = node.previousSibling;
72 alert(node.nodeName);//BR
73
74 //下一个
75 var node = tabNode.nextSibling;
76 alert(node.nodeName);//#text
77 node = node.nextSibling;
78 alert(node.nodeName);//HR
79 }
80</script>
81
82</head>
83
84<body>
85 <div id="divId1">div区域1中的文字</div>
86 <br/>
87 <table id="table1">
88 <tr>
89 <td>Jack</td>
90 <td>20</td>
91 </tr>
92 <tr>
93 <td>张三</td>
94 <td>23</td>
95 </tr>
96 <tr>
97 <td>李四</td>
98 <td>22</td>
99 </tr>
100 <tr>
101 <td>罗斯</td>
102 <td>22</td>
103 </tr>
104 </table>
105 <hr />
106
107 <input type="button" value="获取元素" onclick="getNodeByLevel()" />
108</body>
109
110</html>
111
112
部分演示结果：
节点的增、删、改操作–查有6种，在前面已经讲过
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
2 <head>
3 <title>Dom模型演示4---节点的增、删、改操作--查有6种，在前面已经讲过</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6 div{
7 border: #0000ff solid 1px;
8 width: 200px;
9 padding: 30px;/*内补丁*/
10 margin: 10px;/*外补丁*/
11 }
12 #div1{ background-color:#00ccff; }/*设置或检索对象的背景颜色。*/
13 #div2{ background-color:#ffccff; }
14 #div3{ background-color:#ffff00; }
15 #div4{ background-color:#00cc00; }
16 </style>
17 </head>
18
19 <body>
20 <div id="div1"> </div>
21 <div id="div2"> div区域2中的文字 </div>
22 <div id="div3"> div区域3中的文字 </div>
23 <div id="div4"> div区域4中的文字 </div>
24
25 <hr/>
26
27 <input type="button" value="添加一个文本节点" onclick="creataAndadd1()" >
28 <input type="button" value="添加一个按钮节点" onclick="creataAndadd2()" >
29 <input type="button" value="第三种添加方式" onclick="creataAndadd3()" >
30 <br/>
31 <input type="button" value="删除节点" onclick="delNode()" />
32 <br/>
33 <input type="button" value="移动替换节点" onclick="updateNode1()" />
34 <input type="button" value="克隆替换节点" onclick="updateNode2()" />
35
36
37 <script type="text/javascript">
38 //添加一个文本节点
39 function creataAndadd1(){
40 //createTextNode 从指定值中创建文本字符串。
41 //创建一个文本节点
42 var oTextNode = document.createTextNode("新添加的文本内容");
43 //获取div1节点
44 var oDivNode1 = document.getElementById("div1");
45 //让div1节点把oTextNode节点添加为孩子
46 oDivNode1.appendChild(oTextNode);
47 //appendChild 给对象追加一个子元素。
48 }
49
50 //添加一个按钮节点---基于对象,dom
51 function creataAndadd2(){
52 //创建一个按钮节点
53 var oBtnNode = document.createElement("input");
54 //createElement 为指定标签创建一个元素的实例。
55
56 oBtnNode.type="button";
57 oBtnNode.value="一个按钮";
58
59 //获取div1节点
60 var oDivNode1 = document.getElementById("div1");
61 //让div1节点把oBtnNode节点添加为孩子
62 oDivNode1.appendChild(oBtnNode);
63 }
64
65 //第3种添加节点的方式---html的方式
66 function creataAndadd3(){
67 //获取div1节点
68 var oDivNode1 = document.getElementById("div1");
69
70 //innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
71 //添加文本节点
72 oDivNode1.innerHTML = "湖南城院";//只赋一个
73 //oDivNode1.innerHTML +="湖南城院";//追加
74
75 //继续添加按钮
76 //oDivNode1.innerHTML = "<input type='button' value='按钮a'/> ";
77 oDivNode1.innerHTML += "<input type='button' value='按钮a'/> ";
78 //继续添加链接
79 oDivNode1.innerHTML += "<a href='http://www.baidu.com'/>百度一下</a>";
80 }
81
82 //删除节点
83 function delNode(){
84 //获取div2节点
85 var oDivNode2 = document.getElementById("div2");
86 //oDivNode2.removeNode();//只删当前节点-removeNode 从文档层次中删除对象。
87 //360-8.1浏览器中无效-IE支持
88 //oDivNode2.removeNode(true);//删当前节点及子节点--子树-
89 //360-8.1浏览器中无效-IE支持
90 //※removeNode()方法不建议使用，因为这种删除不彻底!---建议使用父节点来删除
91 //因为-自己删除自己，怎么可能删除干净嘛
92
93 oDivNode2.parentNode.removeChild(oDivNode2);//都支持
94 //removeChild 从元素上删除子结点。
95 }
96
97 //修改节点1---移动替换
98 function updateNode1(){
99 var oDivNode1 = document.getElementById("div1");
100
101 var oDivNode3 = document.getElementById("div3");
102 //oDivNode1.replaceNode(oDivNode3);//自己替换，
103 //不建议-360-8.1浏览器中无效-IE支持
104 //replaceNode 用其它元素替换对象。
105
106 oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);
107 //replaceChild 用新的子元素替换已有的子元素。
108 }
109
110 //修改节点2---克隆替换
111 function updateNode2(){
112 var oDivNode1 = document.getElementById("div1");
113 var oDivNode3 = document.getElementById("div3");
114
115 //var oDivNode3Clone = oDivNode3.cloneNode();//不包含子节点的克隆
116 //cloneNode 从文档层次中复制对对象的引用。
117 var oDivNode3Clone = oDivNode3.cloneNode(true);//包含子节点的克隆
118 oDivNode1.parentNode.replaceChild(oDivNode3Clone, oDivNode1);
119 }
120
121
122
123 </script>
124
125 </body>
126
127</html>
128
129
演示结果：
一开始：
点第一个按钮：
再点第二个按钮：
再点第三个按钮：
再点第四个按钮：
点第五个按钮：
点第六个按钮;
