js中Node和Element有哪些区别

    This is parent content.
    This is child1.

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

getElementById 获取到的到底是什么？

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

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

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

可以看到，document.getElementById() 获取到的结果既是 Node 也是 Element。

Node、ELement 和 HTMLElement 有什么关系？

上面的代码中为什么要用 Node、Element 和 HTMLElement 来做类型判断？它们之间到底有何关系？

看代码：

let parentEle = document.getElementById('parent');

parentEle.__proto__
// HTMLDivElement {…}

parentEle.__proto__.__proto__
// HTMLElement {…}

parentEle.__proto__.__proto__.__proto__
// Element {…}

parentEle.__proto__.__proto__.__proto__.__proto__
// Node {…}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__
// EventTarget {…}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// {constructor: ƒ, …}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// null

对于以上输出结果，我们可以用一张图更直观地表示它们之间的关系：

这也就解释了为什么 getElementById 获取到的既是 Node 也是 Element，因为 Element 继承于 Node。

从而也可以得出一个结论：Element 一定是 Node，但 Node 不一定是 Element。

所以：Element 可以使用 Node 的所有方法。

更直白地观察 Node 和 Element

虽然得出了上面的结论，也清楚了 Node 和 Element 的关系，但是那只是理论，我们还需要更直白的结果来强化对理论的认知。

NodeList 内容：

• [0]  "\n            This is parent content."

• [2]  "\n            "

• [4]  "\n            "

Element.children 获取到的只是父元素点下的所有 div，而 Element.childNodes 获取到的却是父节点下的所有节点（包含文本内容、元素）。

单个 Node 的界限在哪里？

从上面例子的 NodeList 内容中，换行符 \n 被当成一个单独的 Node，由此产生了一个新的疑惑：单个 Node 产生的界限在哪里？

我们将用到的 HTML 代码去掉格式化、合并为一行，修改如下：

This is parent content.This is child1.