JavaScript学习笔记——DOM基础 2.3

发表于2015-08-14 11:23:16| 1123次阅读| 来源webkfa| 作者js,javascript

摘要：一、childNodes属性语法：element.childNodes;返回：一个包含该元素中所有子元素的数组；注意：是所有子元素，并非所有子元素节点。筱雨生 - 博客园筱雨生時光飛逝，莫讓網絡蹉跎了歲月JavaScriptHTMLCSS我的随笔其他如果你对上面的实例进行测试，你会发现结果可能跟你想...

一、childNodes属性

语法：element.childNodes;

返回：一个包含该元素中所有子元素的数组；

注意：是所有子元素，并非所有子元素节点。

01<!doctype html>
02<html>
03<head>
04<meta charset="utf-8">
05<title>筱雨生 - 博客园</title>
06</head>
07<body>
08<h1>筱雨生</h1>
09<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
10<div id="myBlog">
11<ul>
12<li title="JavaScript">JavaScript</li>
13<li title="HTML">HTML</li>
14<li title="CSS">CSS</li>
15<li title="我的随笔">我的随笔</li>
16<li>其他</li>
17</ul>
18</div>
19<script>
20var ulElement = document.getElementsByTagName('ul')[0];
21var numOfChild = ulElement.childNodes.length;
22alert(numOfChild);
23</script>
24</body>
25</html>

如果你对上面的实例进行测试，你会发现结果可能跟你想象的不大一样。还记得在DOM中HTML树状结构图么，也许你会认为返回结果应该是这些子元素节点的总数，可是实际上并非如此。

文档中几乎每一样东西都是一个节点，甚至包含空格和换行符，这是关键点，也是容易被忽略的地方。

二、nodeType属性

语法：node.nodeType;

返回：一个元素的数值，可以根据这个数值来判定是什么类型的节点。

可以这样去记，“元属文”，分别对应1、2、3共3个数值。

01<!doctype html>
02<html>
03<head>
04<meta charset="utf-8">
05<title>筱雨生 - 博客园</title>
06</head>
07<body>
08<h1>筱雨生</h1>
09<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
10<div id="myBlog">
11<ul>
12<li title="JavaScript">JavaScript</li>
13<li title="HTML">HTML</li>
14<li title="CSS">CSS</li>
15<li title="我的随笔">我的随笔</li>
16<li>其他</li>
17</ul>
18</div>
19<script>
20var ulElement = document.getElementsByTagName('ul')[0]; // 获取文档中第一个ul元素
21var ulChild = ulElement.childNodes; //获取ul元素的所有子元素
22//遍历所有子元素
23for(var i = 0 in ulChild){
24    //判断子元素的属性值是否1
25    if(ulChild[i].nodeType == 1){
26        //输出该子元素的title属性值
27        alert(ulChild[i].getAttribute('title'));
28    }
29}
30</script>
31</body>
32</html>

上面这个实例很好的证明了nodeType的价值。

三、nodeValue属性

语法：node.nodeValue;

返回：文本节点的内容；

注意：获取的是文本节点的内容，而并非元素节点的内容。

01<!doctype html>
02<html>
03<head>
04<meta charset="utf-8">
05<title>筱雨生 - 博客园</title>
06</head>
07<body>
08<h1>筱雨生</h1>
09<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
10<div id="myBlog">
11<ul>
12<li title="JavaScript">JavaScript</li>
13<li title="HTML">HTML</li>
14<li title="CSS">CSS</li>
15<li title="我的随笔">我的随笔</li>
16<li></li>
17</ul>
18</div>
19<script>
20var ali = document.getElementsByTagName('li'); 
21for(var i = 0; i < ali.length; i++){
22    if(ali[i].childNodes[0].nodeType == 3){
23        alert(ali[i].childNodes[0].nodeValue);
24    }
25}
26</script>
27</body>
28</html>

上面这个实例中，li元素节点的第一个子元素的值如果为3（说明这个子元素为文本节点），在满足这个条件的情况之后，输出文本节点的内容。

四、firstChild和lastChild属性

两者的语法与childNodes的相同，firstChild和lastChild相当于childNodes特例，前者相当于childNodes[0]，后者应对前者而生。

有了这两个属性，就可以优化上面的实例了。

1var ali = document.getElementsByTagName('li'); 
2for(var i = 0; i < ali.length; i++){
3    if(ali[i].firstChild.nodeType == 3){
4        alert(ali[i].firstChild.nodeValue);
5    }
6}