JavaScript操作DOM元素的childNodes和children区别
对于DOM元素,children是指DOMObject类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。
具体看一下针对children和childNodes在chrome环境下的测试:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
</head>
<body>
<divid="div1"class="div">
<spanid="s1"class="sp"lang="zh-cn">
</span>
</div>
</body>
<scripttype="text/javascript">
functiontest(){
varo=document.getElementById("div1");
varchild=o.children;
console.log("div1.children运行结果:");
for(i=0;i<child.length;i++){
console.log(child[i].tagName);
}
console.log("");
child=o.childNodes;
console.log("div1.childNodes运行结果:");
for(i=0;i<child.length;i++){
console.log(child[i].tagName);
}
}
test();
</script>
</html>
测试结果如下:
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
上面childNodes集合的结果中有两个undefined节点,这连个就是nodeType=3的TextNode。
如果把HTML代码写成如下样式,那么children和childNodes的结果就没有差别了。
<body> <divid="div1"class="div"><spanid="s1"class="sp"lang="zh-cn"></span></div> </body>
对document、head、body及div等HTML元素实测未发现有其他差异