主页 / 网络编程 /

JavaScript操作DOM元素的childNodes和children区别

网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下

对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。

具体看一下针对children和childNodes在chrome环境下的测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="div1" class="div">
 <span id="s1" class="sp" lang="zh-">
 </span>
 </div>
</body>
<script type="text/javascript">
 
 function test() {
 var o = document.getElementById("div1");
 var child = 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>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-"></span></div>
</body>

对document、head、body及div等HTML元素实测未发现有其他差异

上一篇：JavaScript判断是否为数字的4种方法及效率比较 下一篇：JS使用oumousemove和oumouseout动态改变图片显示的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by