共计 2893 个字符，预计需要花费 8 分钟才能阅读完成。
前言
置信咱们很多同学都常常会应用到 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 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 代码去掉格式化、合并为一行，批改如下：
<div id="parent">This is parent content.<div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>输入后果：
NodeList 中的没有换行符了，原来之前例子中 NodeList 里的换行符是因为原始代码中，HTML 标签与标签、内容与标签之间换行而产生的 。
当初就能够答复单个 Node 的界线在哪里了，两个方面：
- 单个的 HTML 标签算是一个独自的 Node；
- 针对非 HTML 标签（比方文本、空格等），从一个 HTML 标签的起始标签开始，到碰到的第一个 HTML 标签为止，如果两头有内容（文本、空格等），那这部分内容算是一个 Node。
再进一步
因为下面的例子中应用的都是块级元素，那如果应用行内元素会怎么？
试验一：
<div id="parent">This is parent content.<span>This is a span.</span><div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>
试验二：
<body>
<div id="parent">This is parent content\n.
<span>This is a span.</span>
<div id="child1">This is child1.</div><div id="child2">This is child2.</div>
</div>
</body>
能够看到，即便应用了 span 元素，最初的后果也是合乎下面得出的单个 Node 界线论断的。
扩大
从以上这么多例子中，咱们能够再扩大总结一下：
- HTML 中的换行只能应用
</br>标签，\n会被间接解析成字符串； - HTML 代码中，标签与文本之间、标签和标签之间的换行都会被如实记录，反映到获取后果上就是
\n； - HTML 代码中，标签与标签、文本与文本、文本与标签之间的空格不被如实记录；
node.data内容中\n前面的空格字符数和理论代码中格式化空格配置数无关，其实也就是“空格会被如实记录”。
总结
以上通过几个例子阐明了一下 Node 和 Element 之间的区别，次要论断总结起来就是：
document.getElementById()获取到的后果既是 Node 也是 Element。- Element 肯定是 Node，但 Node 不肯定是 Element，也可能是文本、空格和换行符。
- NodeList 里的换行符是因为原始代码中，HTML 标签与标签、内容与标签之间换行而产生的。
- 单个的 HTML 标签算是一个独自的 Node。
- 针对非 HTML 标签（比方文本、空格等），从一个 HTML 标签的起始标签开始，到碰到的第一个 HTML 标签为止，如果两头由内容（文本、空格等），那这部分内容算是一个 Node。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
