上次我们学习了通过getElementById()方法和getElementsByTagName()方法来访问节点，那么我们接着上次的内容继续学习parentNode、firstChild、lastChild等node属性与appendChild()、removeChild()、replaceChild()等一些node方法。
首先我们来看一下下面这个 HTML 片段：
|
1
2
3
4
5
6
|
|
在上面的HTML代码中，第一个
1、对 firstChild 最普遍的用法是访问某个元素的文本：
|
1
2
|
varoX = [getElementObj];
vartext = oX.firstChild.nodeValue;
|
比如我们想取得导航列表mainNav的第一个li里面的内容，那么我们就可以这样做：
Demo01
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
2、parentNode 属性常被用来改变文档的结构。假如我们希望从文档中删除带有 id 为”css3”的节点，那么我们就可以这么做：
|
1
2
|
varoCss3 = document.getElementById("css3");
parentNode.removeChild(oCss3);
|
这时当页面载入时就没有CSS3了
3、对lastChild的用法同firstChild
4、previousSibling属性，指向前一个兄弟节点
Demo2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
对于上面弹窗的的结果：E6,7,8结果为"LI" , IE9,10 ,FF ,Chrome结果为#text。原因是因为 IE9,10 ,FF ,Chrome会把空格换行等排版元素也视为节点处理。那么我们该怎么解决这个兼容问题呢，请看下面的Demo3：
Demo3
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
这样IE6,7,8,9,10及FF和Chrome就都能兼容了，由此我们可以从”preNode.nodeName“类推，用previousSibling做一些其他事情。
5、nextSibling属性，指向后一个兄弟节点。其用法同previousSibling。
6、根节点
有两种特殊的文档属性可用来访问根节点：
|
1
2
|
document.documentElement//返回存在于 XML 以及 HTML 文档中的文档根节点
document.body//对 HTML 页面的特殊扩展，提供了对 标签的直接访问
|
7、关于节点的信息nodeName、nodeValue 以及 nodeType
（1）、nodeName：节点的名称
a、元素节点的 nodeName 是标签名称，返回的标签名称为大写
//如document.getElementById(id).nodeName;
b、属性节点的 nodeName 是属性名称 //???疑惑中
c、文本节点的 nodeName 永远是 #text
//如上面Demo01中的oHome.firstChild.nodeName;
d、文档节点的 nodeName 永远是 #document //如document.nodeName;
(2)、nodeValue：节点的值
a、对于文本节点，nodeValue 属性包含文本，如上面Demo01中的var textHome = oHome.firstChild.nodeValue;alert(“textHome”);
b、对于属性节点，nodeValue 属性包含属性值。//???疑惑中
c、nodeValue 属性对于文档节点和元素节点是不可用的
(3)、nodeType：节点的类型，返回的结果可能为1，2，3，8，9。它们表示的意义为：
1代表元素类型，2代表属性类型，3代表文本类型，8代表注释类型，9代表文档类型
8、appendChild()方法，给指定节点添加一个新的子节点
Demo4
|
1
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
|
|
9、removeChild()方法，移除指定节点的子节点
Demo5
|
1
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
|
|
10、replaceChild(newChild,oldChild)，替换指定节点的子节点
Demo6
|
1
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
|
|
11、insertBefore(newChild,oldChild)，在同一级的节点前面插入新节点
Demo7 在Javascript前插入JQuery
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
|
12、hasChildNodes()，判断节点是否有子节点，如果有则返回true
Demo8
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
|
那么，我们这部分内容就结束了。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 