JavaScript学习笔记——DOM基础 2.3

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

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

一、childNodes属性

语法：element.childNodes;

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li>其他</li>
</ul>
</div>
<script>
var ulElement = document.getElementsByTagName('ul')[0];
var numOfChild = ulElement.childNodes.length;
alert(numOfChild);
</script>
</body>
</html>

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

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

二、nodeType属性

语法：node.nodeType;

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li>其他</li>
</ul>
</div>
<script>
var ulElement = document.getElementsByTagName('ul')[0]; // 获取文档中第一个ul元素
var ulChild = ulElement.childNodes; //获取ul元素的所有子元素
//遍历所有子元素
for(var i = 0 in ulChild){
    //判断子元素的属性值是否1
    if(ulChild[i].nodeType == 1){
        //输出该子元素的title属性值
        alert(ulChild[i].getAttribute('title'));
    }
}
</script>
</body>
</html>

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

三、nodeValue属性

语法：node.nodeValue;

返回：文本节点的内容；

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
<script>
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
    if(ali[i].childNodes[0].nodeType == 3){
        alert(ali[i].childNodes[0].nodeValue);
    }
}
</script>
</body>
</html>

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

四、firstChild和lastChild属性

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

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

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

从语义上看，这样写更容易理解，不是吗。