你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记——DOM基础 2.3

一、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);  }}

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

五、题外话

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