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。