domsub(dom精神控制入门教程)

大家好，我是讯享网，很高兴认识大家。

本文由原作者Shadeed Ed翻译。

DOM也使用术语元素，它非常类似于节点。那么，DOM节点和元素有什么区别呢？

1. DOM节点

理解节点和元素区别的关键是理解什么是节点。

在更高的层次上，DOM文档由节点层次结构组成。每个节点可以有一个父节点和/或一个子节点。

看看下面的HTML文档:

& lt！DOCTYPEhtml & gt& lthtml & gt& lthead & gt& lttitle & gtMyPage & lt/title & gt；& lt/head & gt；& ltbody & gt& lt！-page body-& gt；& lth2 & gtMyPage & lt/H2 & gt；& ltpid = & # 34内容& # 34；& gt感谢您访问我的网页！& lt/p & gt；& lt/body & gt；& lt/html & gt；该文档包含以下节点层次结构:

& lthtml & gt是文档树中的一个节点。它有两个子节点:

& ltbody & gt有三个子节点的节点:注释节点

HTML文档中的标记表示一个节点。有趣的是，普通文本也是一个节点。段落

；有一个子节点:文本节点“感谢您访问我的网页！”。

1.2节点类型

我们如何区分这些不同类型的节点？答案在于DOM节点接口，尤其是Node.nodeType属性。

Node.nodeType可以具有以下代表节点类型的值之一:

Node.ELEMENT_NODENode.ATTRIBUTE_NODENode.TEXT_NODENode.CDATA_SECTION_NODENode.PROCESSING_INSTRUCTION_NODENode.COMMENT_NODENode.DOCUMENT_NODENode.DOCUMENT_TYPE_NODENode.DOCUMENT_FRAGMENT_NODENode.NOTATION_NODE

常数有意义地指示节点类型:例如，node。ELEMENT_NODE代表元素节点，NODE。TEXT_NODE代表文本节点，NODE。DOCUMENT_NODE文档节点等等。

例如，让我们选择段落节点，然后查看其nodeType属性:

const paragraph = document . query selector(& # 39；p & # 39);paragraph.nodeType===Node。元素_节点；//= & gt；表示整个节点的文档树的节点类型是node。文档节点:

document.nodeType===Node。文档_节点；//= & gt；2.DOM元素在掌握了DOM节点的知识之后，就该区分DOM节点和元素了。

如果你知道节点术语，那么答案是显而易见的:一个元素是一种特定类型的节点元素(node。ELEMENT_NODE)，以及文档、注释、文本等类型。

简而言之，元素是在HTML文档中使用标记编写的节点。& lthtml & gt，& lthead & gt，& lttitle & gt，& ltbody & gt，& lth2 & gt，& ltp & gt是元素，因为它们由标签表示。

文档类型、注释和文本节点不是元素，因为它们不是用标签编写的:

Node是一个节点的构造函数，HTMLElement是JS DOM中一个元素的构造函数。Paragraph既是节点又是元素，是Node和HTMLElement的实例。

const paragraph = document . query selector(& # 39；p & # 39);paragraphinstanceofNode//= & gt；trueparagraphinstanceofHTMLElement；//= & gt；false简单来说，元素是节点的子类型，就像猫是动物的子类型一样。

3. DOM属性：节点和元素

除了区分节点和元素，还有必要区分只包含节点或元素的DOM属性。

节点类型的以下属性被评估为节点或节点集(节点列表):

node.parentNode//nodeornullnode . first child；//nodeornullnode . last child；//nodeornullnode . child nodes；//NodeList但是，以下属性是元素或元素的集合(HTMLCollection):

node.parentElement//htmlelementornullnode . children；//HTMLCollection既然node.childNodes和node.children都返回子列表，为什么要同时拥有这两个属性呢？好问题！

考虑以下包含一些文本的段落元素:

& ltp & gt& ltb & gt谢谢& lt/b & gt；forvisitingmywebpage网页！& lt/p & gt；打开演示，然后查看parapgraph节点的childNodes和children属性:

const paragraph = document . query selector(& # 39；p & # 39);paragraph.childNodes//NodeList:[HTMLElement，Text]paragraph . children；//html collection:[html element]paragraph . child nodes集合包含2个节点:< b & gt谢谢& lt/b & gt；，以及访问我的网页！文本节点！

但是，paragraph.children集合只包含一项:谢谢& lt/b & gt；。

由于paragraph.children只包含元素，所以这里没有text节点，因为它的类型是text (Node。TEXT_NODE)，而不是element (Node。元素_节点)。

有了node.childNodes和node.children，我们可以选择要访问的子节点集:所有子节点或只有子节点是元素。

4.总结

DOM是节点的分层集合，每个节点可以有一个父节点和/或一个子节点。如果知道什么是节点，就很容易知道DOM节点和元素的区别。

节点有多种类型，元素类型就是其中之一。在HTML文档中，元素由标签表示。

End ~我是小智，我要去洗碗了，下次见！

作者:Shadeed译者:前端肖智来源:dmitripavlutin

原文:https://dmitripautin.com/dom-node-element/