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元素实测未发现有其他差异
热门推荐
10 五一公司放假祝福语简短
11 追星女孩的祝福语简短
12 给长辈端午祝福语 简短
13 生日祝福语有诗意简短
14 团圆日祝福语简短
15 中秋商务祝福语简短最新
16 温暖文艺简短祝福语短句
17 男孩上学祝福语简短的
18 入住酒店文案祝福语简短