了解 JavaScript 中的文档对象模型

摘要：在本教程中，您将了解 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>Code language: HTML, XML (xml)

以下树表示上面的 HTML 文档

在此 DOM 树中，文档是根节点。根节点有一个子节点，即<html>元素。<html> 元素称为文档元素。

每个文档只能有一个document元素。在 HTML 文档中，document元素是<html>元素。每个标记都可以由树中的一个节点表示。

节点类型

DOM 树中的每个节点都由节点类型标识。JavaScript 使用整数来确定节点类型。下表说明了节点类型常量

常量	值	描述
`Node.ELEMENT_NODE`	`1`	一个`Element`节点，例如`<p>`或`<div>`。
`Node.TEXT_NODE`	`3`	`Element`或`Attr`中的实际`Text`。
`Node.CDATA_SECTION_NODE`	`4`	一个`CDATASection`，例如`<!CDATA[[ … ]]>`。
`Node.PROCESSING_INSTRUCTION_NODE`	`7`	XML 文档的`ProcessingInstruction`，例如`<?xml-stylesheet … ?>`。
`Node.COMMENT_NODE`	`8`	一个`Comment`节点，例如`<!-- … -->`。
`Node.DOCUMENT_NODE`	`9`	一个`Document`节点。
`Node.DOCUMENT_TYPE_NODE`	`10`	一个`DocumentType`节点，例如`<!DOCTYPE html>`。
`Node.DOCUMENT_FRAGMENT_NODE`	`11`	一个`DocumentFragment`节点。

要获取节点类型，请使用nodeType属性

node.nodeTypeCode language: CSS (css)

您可以将nodeType属性与上面的常量进行比较，以确定节点类型。例如

if (node.nodeType == Node.ELEMENT_NODE) {
    // node is the element node
}Code language: JavaScript (javascript)

nodeName 和 nodeValue 属性

节点具有两个重要的属性：nodeName和nodeValue，它们提供有关节点的特定信息。

这些属性的值取决于节点类型。例如，如果节点类型是元素节点，则nodeName始终与元素的标签名称相同，而nodeValue始终为null。

因此，最好在使用这些属性之前测试节点类型

if (node.nodeType == Node.ELEMENT_NODE) {
    let name = node.nodeName; // tag name like <p>
}Code language: JavaScript (javascript)

节点和元素

有时很容易混淆Node和Element。

节点是 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 树中，节点与其他节点存在关系。

本教程对您有帮助吗？