DOM节点和元素之间有什么区别？ |
您所在的位置：网站首页 › 超级节点和普通节点的区别 › DOM节点和元素之间有什么区别？ |
DOM节点和元素之间有什么区别？
|
DOM节点和元素之间有什么区别？
文档对象模型（DOM）是一个将HTML或XML文档视为树状结构的接口，其中每个节点是文档的一个对象。DOM还提供了一套方法来查询树状结构，改变结构，风格。 DOM还使用了元素这个术语：它与节点很相似。那么，DOM节点和元素之间有什么区别？让我们来找出答案 1.DOM节点理解节点和元素之间的区别的关键是要理解什么是节点。 从更高的角度看，一个DOM文档由一个节点的层次结构组成。每个节点都可以有一个父节点和/或子节点。 让我们看一下下面这个HTML文档。 My Page My Page Thank you for visiting my web page!该文档包含以下层次结构的节点。
是文档树中的一个节点。它有2个孩子： 和 节点。 HTML文档中的标签代表一个节点，有趣的是，普通文本也是一个节点。段落节点 有一个子节点：文本节点"Thank you for visiting my web page!" 。 1.2 节点类型你怎么能区分这些不同类型的节点呢？答案就在DOM节点接口中，特别是Node.nodeType 属性中。 Node.nodeType 可以有以下值之一，代表节点的类型: Node.ELEMENT_NODE Node.ATTRIBUTE_NODE Node.TEXT_NODE Node.CDATA_SECTION_NODE Node.PROCESSING_INSTRUCTION_NODE Node.COMMENT_NODE Node.DOCUMENT_NODE Node.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE Node.NOTATION_NODE常数有意义地表示节点类型：例如，Node.ELEMENT_NODE 代表元素节点，Node.TEXT_NODE 代表文本节点，Node.DOCUMENT_NODE 是文档节点，等等。 例如，让我们选择段落节点，并看看它的nodeType 属性。 const paragraph = document.querySelector('p'); paragraph.nodeType === Node.ELEMENT_NODE; // => true正如预期的那样，paragraph.nodeType 的值是Node.ELEMENT_NODE ，表明该段落是一个元素。 该段还包含一个文本节点。 const paragraph = document.querySelector('p'); const firstChild = paragraph.childNodes[0]; firstChild.nodeType === Node.TEXT_NODE; // => true有一种节点类型表示整个文档树的节点 -Node.DOCUMENT_NODE 。 document.nodeType === Node.DOCUMENT_NODE; // => true 2.DOM元素在很好地掌握了什么是DOM节点之后，现在是区分DOM节点和元素的时候了。 如果你很好地掌握了节点这个术语，那么答案是显而易见的：元素是一个特定类型的节点--元素(Node.ELEMENT_NODE)。还有像文档、评论、文本等类型。 简单地说，一个元素是在HTML文档中使用标签写的一个节点。,,,,, 都是元素，因为它们是用标签表示的。 文档类型、评论、文本节点不是元素，因为它们不是用标签写的。 Thank you for visiting my web page! const paragraph = document.querySelector('p'); paragraph instanceof Node; // => true paragraph instanceof HTMLElement; // => true简单点说，元素是节点的一个子类型，就像猫是动物的一个子类型一样。 3.DOM属性：节点和元素除了区分节点和元素之外，你还需要区分只包含节点或只包含元素的DOM属性。 以下是Node 类型的属性，评估为一个节点或一个节点的集合(NodeList)。 node.parentNode; // Node or null node.firstChild; // Node or null node.lastChild; // Node or null node.childNodes; // NodeList然而，下面的属性是元素或元素的集合(HTMLCollection)。 node.parentElement; // HTMLElement or null node.children; // HTMLCollection由于node.childNodes 和node.children 都返回一个孩子的列表，为什么有这两个属性？好问题! 考虑一下下面这个包含一些文本的段落元素。 Thank you for visiting my web page!打开演示，然后看一下parapgraph节点的childNodes 和children 属性。 const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]然而，paragraph.children 集合只包含1个项目：粗体元素Thank you 。 因为paragraph.children 只包含元素，文本节点没有包括在这里，因为它的类型是文本（Node.TEXT_NODE ），而不是元素（Node.ELEMENT_NODE ）。 同时拥有node.childNodes 和node.children 让你可以选择你想访问的子集：所有的子节点或者只有元素的子集。 4.4.总结一个DOM文档是一个有层次的节点集合。每个节点都可以有一个父节点和/或子节点。 如果你了解什么是节点，理解DOM节点和元素之间的区别就很容易了。 节点有类型，元素类型是其中之一。元素在HTML文档中由一个标签表示。 |
【本文地址】
今日新闻 |
推荐新闻 |