一、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); } }
从语义上看，这样写更容易理解，不是吗。
五、题外话
你可能也领悟到了，写注释，是一个非常好的习惯。