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>
其运行结果如下: