Element和Node的区别你造吗？

1.写在前面

我们经常使用 document.getElementById 去获取 DOM 中的元素，也会使用 childNodes 来获取子节点。那么 Element 和 Node 的区别是什么？而什么又是 HTMLCollection,HTMLElement,和 NodeList 呢？

一个简单的页面：

<html>
  <body>
    <h1>China</h1>
    <!-- My comment ...  -->
    <p>China is a popular country with...</p>
    <div>
      <button>See details</button>
    </div>
  </body>
</html>

body里的直系子元素一共有三个：h,p,div。我们可以用document.body.childNodes查看, 结果如下:

问题来了：

1.这么会有这么多的#text？
2.注释算节点？

在回答上面两个问题之前，就有必要理解下什么是Node了。

2.Node vs Elemet

以下摘自 MDN:

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

The following interfaces all inherit from Node its methods and properties: Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference.

简单的说就是Node是一个基类，DOM 中的Element，Text和Comment都继承于它。换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE, TEXT_NODE和COMMENT_NODE。

所以我们平时使用的 html 上的元素，即 Element 是类型为ELEMENT_NODE的Node。

利用nodeType可以查看所有类型，如下图：

到这里，我想我们就可以解释上面两个问题了。

实际上Node表示的是 DOM 树的结构，在 html 中，节点与节点之间是可以插入文本的，这个插入的空隙就是TEXT_NODE，即：

<body>
  we can put text here 1...
  <h1>China</h1>
  we can put text here 2...
  <!-- My comment ...  -->
  we can put text here 3...
  <p>China is a popular country with...</p>
  we can put text here 4...
  <div>
    <button>See details</button>
  </div>
  we can put text here 5 ...
</body>