childNodes与children区别

来源：互联网发布：好记的淘宝店铺的店名编辑：程序博客网时间：2024/05/17 08:07

获取节点信息是js中必不可少的操作，那么childNodes和children有什么区别呢？

instanceof用来判断获取的节点的类型
测试对象在其原型链中是否存在一个构造函数的prototype属性
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

// 定义构造函数function C(){}function D(){}var o = new C();// true，因为 Object.getPrototypeOf(o) === C.prototypeo instanceof C;// false，因为 D.prototype不在o的原型链上o instanceof D;o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回trueC.prototype instanceof Object // true,同上

节点类型NodeType

节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9

document.getElementById获取到的是什么节点呢？
如下可知获得的是元素节点

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Demo</title></head><body>    <div id="test">        <p>One</p>        <P>Two</p>    </div>    <script>        var oDiv=document.getElementById("test");        console.log(oDiv instanceof Node);        //true        console.log(oDiv instanceof Element);    //true    </script></body></html>

childNodes children
　　children是Element的属性，childNodes是Node的属性，我们再来测试一下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Demo</title></head><body>    <div id="test">        <p>One</p>        <P>Two</p>    </div>    <script>        var oDiv=document.getElementById("test");        console.log(oDiv.children[0] instanceof Node);        //true        console.log(oDiv.children[0] instanceof Element);    //true        console.log(oDiv.childNodes[0] instanceof Node);    //true        console.log(oDiv.childNodes[0] instanceof Element);    //false        console.log(typeof oDiv.childNodes[0].children);    //undefined        console.log(typeof oDiv.childNodes[0].childNodes);    //object    </script></body></html>

结论
区别：

childNodes: 获取到所有的节点，包含元素节点、属性节点、文本节点节点类型可以用nodeType来区分，元素节点1、属性节点2、文本节点3

children: 则只会获取到元素节点

如：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>  </head>  <body>    <ul>      <li></li>      <li></li>    </ul>    <script type="text/javascript" src="./childNodes|children.js">    </script>  </body></html>

window.onload=function(){  var oUl = document.getElementsByTagName('ul')[0];  alert(oUl.childNodes.length);  console.log(oUl.childNodes);  //[text, li, text, li, text]}

结果是childNodes 5
children 2

0 0