JavaScript中Element与Node的区别，children与childNodes的区别

最新推荐文章于 2023-01-15 19:34:03 发布

xingshen100

最新推荐文章于 2023-01-15 19:34:03 发布

阅读量1.1k

点赞数

分类专栏： java web 文章标签： js DOM Element Node

java web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript中Element与Node的区别，children与childNodes的区别

　　本文首发博客园：http://jscode.cnblogs.com，转载请注明出处。

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

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

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

　　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。

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

xingshen100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中Element与Node的区别，children与childNodes的区别

JavaScript中Element与Node的区别，children与childNodes的区别　　本文首发博客园：http://jscode.cnblogs.com，转载请注明出处。　　关于Element跟Node的区别，cilldren跟childNodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。　　Node(节点)是DOM层次
复制链接

扫一扫