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

时间 2019-11-12

标签 javascript element node 区别 children childnodes 栏目 JavaScript 繁體版

原文原文链接

============转载=================
html

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

节点类型	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等属性。spa

　　以上就是Element跟Node的区别。
code

那么用document.getElementById("xxx")取到的是Node仍是Element呢？咱们来测试一下：orm

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

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

经过上面的代码咱们能够看到，Element的children[0]仍为Element，是Node和Element的实例，Node的childNdoes[0]为Node，只是Node的实例，不是Element的实例。继承

　　同时，Node的children属性为为undefined。
ip

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