childNodes与children区别

最新推荐文章于 2023-08-26 11:28:14 发布

晟沚

最新推荐文章于 2023-08-26 11:28:14 发布

阅读量688

点赞数

分类专栏： web前端 js 文章标签： js childNodes children 区别

本文链接：https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/70337835

版权

web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

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

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

// 定义构造函数
function C(){}
function D(){}

var o = new C();

// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C;

// false，因为 D.prototype不在o的原型链上
o instanceof D;

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.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