js中childNodes易错点、详解定义以及用法
最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。
DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示：
它常见的5种节点类型如下：
| 节点类型 | 说明 | 值 |
|---|---|---|
| 元素节点 | 每一个HTML标签都是一个元素节点，如 div 、 p、ul等，换行符要在这里强调一下。 | 1 |
| 属性节点 | 元素节点（HTML标签）的属性，如 id 、class 、name 等。 | 2 |
| 文本节点 | abcd 像这样的一段文字，没有任何的html标签，就是文本节点。空白符要在这里强调一下 | 3 |
| 注释节点 | 表示文档注释，形式为<！-- comment text -->。 | 8 |
| 文档节点 | 表示整个文档（DOM 树的根节点，即 document ） | 9 |
childNodes属性可以用来获取任意一个元素的所有子元素，它包含了上面所写到的文本节点、元素节点和注释节点。
文档节点和属性节则不被包含在内。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用节点输出文本</title>
</head>
<body>
<div id="lianJie" style="background-color: gray;">
<a href="xinlang" id="xinlanglianjie"><span>新浪</span><span>新浪1</span></a><br />
<a href="baidu"><span>百度</span></a>
<a href="wangyi"><span>网易</span></a>
<a href="zhonghuawang"><span>中华网</span></a>
<!--注释-->
</div>
<script language="JavaScript">
//提示当前页面中所有超链接名称和网址，做成键值输出
var adr = "";
//遍历超链接集合,links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。
for(n in document.links){
//如果其links数组的长度等于其子节点的长度，必须跳出循环，否则会出现异常
if (document.links.length == document.links[n]) {
break
}
//获取links的第一个子节点
adr += document.links[n].childNodes[0].innerHTML + ": \t" + document.links[n] + "\n";
}
alert( adr );
</script>
</body>
</html>
运行结果如下所示：
这个结果是没有问题，但是代码稍微变了一下，问题就来了，如下图所示:
这是因为childNodes属性返回的子节点中，它包含了空白符。当span标签换行的时候，它会把空白符算进去。这往往是新手容易忽视的点。
下面我们来具体说说childNodes子节点的长度以及如何查看子节点。它的长度举例，按照下图所示：
以下我们可以用代码来获取上面a标签的子节点长度及其内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环训练</title>
</head>
<body>
<div style="background-color: gray;">
<a href="xinlang" id="lianJie">
<span>新浪</span><br />
<span>新浪1</span>
<!--注释-->
</a>
</div>
<script language="JavaScript">
//获取lianjie
var lianJie = document.getElementById("lianJie").childNodes;
//使用childNodes.length可以输出其长度
console.log(lianJie.length);
//nodeName输出字节的内容
var txt="";
for (i=0; i<lianJie.length; i++){
txt=txt +lianJie[i].nodeName;
}
console.log(txt);
</script>
</body>
</html>
其运行结果如下：
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
