DOM节点和元素之间有什么区别？

文档目标模型（DOM）是一个将HTML或XML文档视为树状结构的接口，其中每个节点是文档的一个目标。DOM还供给了一套方法来查询树状结构，改动结构，风格。

DOM还运用了元素这个术语：它与节点很类似。那么，DOM节点和元素之间有什么区别？让我们来找出答案

1.DOM节点

了解节点和元素之间的区别的关键是要了解什么是节点。

从更高的视点看，一个DOM文档由一个节点的层次结构组成。每个节点都能够有一个父节点和/或子节点。

让我们看一下下面这个HTML文档。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- Page Body -->
    <h2>My Page</h2>
    <p id="content">Thank you for visiting my web page!</p>
  </body>
</html>

该文档包含以下层次结构的节点。

<html> 是文档树中的一个节点。它有2个孩子： <head>和 <body>节点。

HTML文档中的标签代表一个节点，有趣的是，普通文本也是一个节点。阶段节点<p> 有一个子节点：文本节点"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文档中运用标签写的一个节点。<html>,<head>,<title>,<body>,<h2>,<p> 都是元素，由于它们是用标签表明的。

文档类型、谈论、文本节点不是元素，由于它们不是用标签写的。

 <!DOCTYPE html>
<html>
  <body>
    <!-- Page Body -->
    <p>
      Thank you for visiting my web page!
    </p>
  </body>
</html>

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 都返回一个孩子的列表，为什么有这两个特点？好问题!

考虑一下下面这个包含一些文本的阶段元素。

<p>
  <b>Thank you</b> for visiting my web page!
</p>

翻开演示，然后看一下parapgraph节点的childNodes 和children 特点。

const paragraph = document.querySelector('p');
paragraph.childNodes; // NodeList:       [HTMLElement, Text]
paragraph.children;   // HTMLCollection: [HTMLElement]

但是，paragraph.children 调集只包含1个项目：粗体元素<b>Thank you</b> 。

由于paragraph.children 只包含元素，文本节点没有包含在这里，由于它的类型是文本（Node.TEXT_NODE ），而不是元素（Node.ELEMENT_NODE ）。

一起具有node.childNodes 和node.children 让你能够选择你想拜访的子集：一切的子节点或许只要元素的子集。

4.4.总结

一个DOM文档是一个有层次的节点调集。每个节点都能够有一个父节点和/或子节点。

假如你了解什么是节点，了解DOM节点和元素之间的区别就很简单了。

节点有类型，元素类型是其中之一。元素在HTML文档中由一个标签表明。