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。

----------------------------------------------------------------------

对于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-cn">
 </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，即回车，回车无tagName，但是childNodes能识别，而children不能识别。注意了，<span>不属于TextNode

如果把HTML代码写成如下样式，那么children和childNodes的结果就没有差别了。

<body>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

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

Biegral Blog

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

阅读排行

分类

归档