DOM 精通了？请问 Node 和 Element 有何区别？

前言

相信我们很多同学都经常会使用到 Node（节点）和 Element（节点）的概念，那么这两者到底有何区别，不知道有多少人能够答得上来这个问题？

今天，我在这里尝试着解释一下 Node 和 Element 的区别。

准备工作

在正式开始介绍 Node 和 Element 区别之前，我们先准备以下代码：

<div id="parent">
    This is parent content.
    <div id="child1">This is child1.</div>
    <div id="child2">This is child2.</div>
</div>

下面的绝大多数现象和结论都将借助这段代码的结构来进行展示说明。

getElementById 获取到的到底是什么？

document.getElementById() 方法应该是我们最常使用的接口之一，那么它的返回值到底是 Node 还是 Element？

我们使用以下代码验证一下：

let parentEle = document.getElementById('parent');
parentEle instanceof Node
// true
parentEle instanceof Element
// true
parentEle