js中Node和Element有哪些区别-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

js中Node和Element有哪些区别

这篇文章主要介绍了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

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

js中Node和Element有哪些区别

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

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

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

更直白地观察 Node 和 Element

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

js中Node和Element有哪些区别

NodeList 内容：

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

单个 Node 的界限在哪里？

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

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

This is parent content.This is child1.This is child2.

输出结果：

js中Node和Element有哪些区别

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.

js中Node和Element有哪些区别

试验二：


    This is parent content\n.
        This is a span.
        This is child1.This is child2.
    

js中Node和Element有哪些区别

可以看到，即使使用了 span 元素，最后的结果也是符合上面得出的单个 Node 界限结论的。

扩展

从以上这么多例子中，我们可以再扩展总结一下：

感谢你能够认真阅读完这篇文章，希望小编分享的“js中Node和Element有哪些区别”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


新闻标题：js中Node和Element有哪些区别
浏览路径：http://kswsj.cn/article/jecsdd.html

其他资讯