重庆分公司
重庆分公司
js中Node和Element有哪些区别
这篇文章主要介绍了js中Node和Element有哪些区别，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
站在用户的角度思考问题，与客户深入沟通，找到呼伦贝尔网站设计与呼伦贝尔网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖呼伦贝尔地区。
准备工作
在正式开始介绍 Node 和 Element 区别之前，我们先准备以下代码：
This is parent content.
This is child1.
This is child2.
下面的绝大多数现象和结论都将借助这段代码的结构来进行展示说明。
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 内容：
Element.children 获取到的只是父元素点下的所有 div，而 Element.childNodes 获取到的却是父节点下的所有节点（包含文本内容、元素）。
单个 Node 的界限在哪里？
从上面例子的 NodeList 内容中，换行符 \n 被当成一个单独的 Node，由此产生了一个新的疑惑：单个 Node 产生的界限在哪里？
我们将用到的 HTML 代码去掉格式化、合并为一行，修改如下：
This is parent content.This is child1.This is child2.
输出结果：
NodeList 中的没有换行符了，原来之前例子中 NodeList 里的换行符是因为原始代码中， HTML 标签与标签、内容与标签之间换行而产生的。
现在就可以回答单个 Node 的界限在哪里了，两个方面：
比如， 1 2 3 4 5 6 7 8 9
再进一步
因为上面的例子中使用的都是块级元素，那如果使用行内元素会怎样？
试验一：
This is parent content.This is a span.This is child1.This is child2.
试验二：
This is parent content\n.
This is a span.
This is child1.This is child2.
可以看到，即使使用了 span 元素，最后的结果也是符合上面得出的单个 Node 界限结论的。
扩展
从以上这么多例子中，我们可以再扩展总结一下：
HTML 中的换行只能使用 \n 会被直接解析成字符串；
HTML 代码中，标签与文本之间、标签和标签之间的换行都会被如实记录，反映到获取结果上就是 \n；
HTML 代码中，标签与标签、文本与文本、文本与标签之间的空格会被如实记录；
node.data 内容中 \n 后面的空格字符数和实际代码中格式化空格配置数有关，其实也就是“空格会被如实记录”。
感谢你能够认真阅读完这篇文章，希望小编分享的“js中Node和Element有哪些区别”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站标题：js中Node和Element有哪些区别
文章出自：http://cxhlcq.com/article/jecsdd.html
-
在线咨询
微信咨询
电话咨询
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回顶部
