JavaScript学习笔记——DOM基础 2.3

| 阅读数:--次| 作者: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);
    }
}

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

五、题外话

你也可能领悟到,写注释,是一个非常好的习惯。

返回顶部
学到老代码浏览 关闭浏览