欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript中Element与Node的区别，children与childNodes的区别【转】

程序员文章站 2022-04-16 10:05:31
关于Element跟Node的区别，cilldren跟childNodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。 Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有 ......

　关于element跟node的区别，cilldren跟childnodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。

　　node(节点)是dom层次结构中的任何类型的对象的通用名称，node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过nodetype区分，常见的有：

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

　　更多节点类型参考：https://developer.mozilla.org/en-us/docs/dom/node.nodetype?redirectlocale=en-us&redirectslug=nodetype

　　element继承了node类，也就是说element是node多种类型中的一种，即当nodetype为1时node即为elementnode，另外element扩展了node，element拥有id、class、children等属性。

　　以上就是element跟node的区别。

　　那么用document.getelementbyid("xxx")取到的是node还是element呢？我们来测试一下：

<!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>

我们可以看到用document.getelementbyid("xxx")取到的既是element也是node。

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>

通过上面的代码我们可以看到，element的children[0]仍为element，是node和element的实例，node的childndoes[0]为node，只是node的实例，不是element的实例。

同时，node的children属性为为undefined。

通过以上的讲述，大家弄明白了吗？

文章来自：

上一篇： Python实现冒泡排序的简单应用示例

下一篇： 在vue项目中使用sass的配置方法

推荐阅读