在本教程中，您将了解 JavaScript 中的文档对象模型。
什么是文档对象模型 (DOM)
文档对象模型 (DOM) 是一种用于操作 HTML 文档的应用程序编程接口 (API)。
DOM 将 HTML 文档表示为节点树。 DOM 提供的功能允许您有效地添加、删除和修改文档的各个部分。
请注意，DOM 是一种跨平台且独立于语言的操作 HTML 和 XML 文档的方式。
作为节点层次结构的文档
DOM 将 HTML 文档表示为节点的层次结构。 考虑以下 HTML 文档：
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>
下面的树表示上面的 HTML 文档：
在此 DOM 树中，文档是根节点。 根节点有一个子节点，即 <html> 元素。 <html> 元素称为文档元素。
每个文档只能有一个文档元素。 在 HTML 文档中，文档元素是 <html> 元素。 每个标记都可以由树中的一个节点表示。
节点类型
DOM 树中的每个节点都由节点类型标识。 JavaScript 使用整数来确定节点类型。 下表说明了节点类型常量：
| Constant | Value | Description |
|---|---|---|
Node.ELEMENT_NODE |
1 |
An Element node like <p> or <div>. |
Node.TEXT_NODE |
3 |
The actual Text inside an Element or Attr. |
Node.CDATA_SECTION_NODE |
4 |
A CDATASection, such as <!CDATA[[ … ]]>. |
Node.PROCESSING_INSTRUCTION_NODE |
7 |
A ProcessingInstruction of an XML document, such as <?xml-stylesheet … ?>. |
Node.COMMENT_NODE |
8 |
A Comment node, such as <!-- … -->. |
Node.DOCUMENT_NODE |
9 |
A Document node. |
Node.DOCUMENT_TYPE_NODE |
10 |
A DocumentType node, such as <!DOCTYPE html>. |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
A DocumentFragment node. |
要获取节点的类型，您可以使用以下nodeType属性：
node.nodeType
您可以将nodeType属性与上述常量进行比较以确定节点类型。例如：
if (node.nodeType == Node.ELEMENT_NODE) {
// node is the element node
}
nodeName 和 nodeValue 属性
节点有两个重要的属性：nodeName 和 nodeValue，它们提供有关节点的特定信息。
这些属性的值取决于节点类型。 例如，如果节点类型是元素节点，则 nodeName 始终与元素的标签名称相同，而 nodeValue 始终为 null。
因此，最好在使用这些属性之前测试节点类型：
if (node.nodeType == Node.ELEMENT_NODE) {
let name = node.nodeName; // tag name like <p>
}
节点和元素
有时很容易混淆节点和元素。
节点是 DOM 树中任何对象的通用名称。 它可以是任何内置的 DOM 元素，例如文档。 或者它可以是 HTML 文档中指定的任何 HTML 标记，如 <div> 或 <p>。
元素是具有特定节点类型 Node.ELEMENT_NODE 的节点，它等于 1。
换句话说，节点是元素的通用类型。 该元素是节点类型为 Node.ELEMENT_NODE 的特定节点类型。
下图说明了 Node 和 Element 类型之间的关系：
请注意，getElementById() 和 querySelector() 返回具有 Element 类型的对象，而 getElementsByTagName() 或 querySelectorAll() 返回 NodeList，它是节点的集合。
节点关系
任何节点都与 DOM 树中的其他节点有关系。 这些关系与传统家谱中描述的关系相同。
例如，<body> 是 <html> 节点的子节点，而 <html> 是 <body> 节点的父节点。
<body> 节点是 <head> 节点的兄弟节点，因为它们共享同一个直接父节点，即 <html> 元素。
下图说明了节点之间的关系：
总结
HTML 或 XML 文档可以表示为节点树，就像传统的家谱一样。
每个标记都可以表示为具有特定节点类型的节点。
元素是一种特定类型的节点，节点类型为 Node.ELEMENT_NODE。
在 DOM 树中，一个节点与其他节点有关系。
相关文章
