【JS DOM】01—了解 JavaScript 中的文档对象模型

JS DOM1年前 (2023)发布 admin
1,939 0

在本教程中,您将了解 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 文档:

【JS DOM】01—了解 JavaScript 中的文档对象模型

 

在此 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 CDATASection, such as <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE 7 ProcessingInstruction of an XML document, such as <?xml-stylesheet … ?>.
Node.COMMENT_NODE 8 Comment node, such as <!-- … -->.
Node.DOCUMENT_NODE 9 Document node.
Node.DOCUMENT_TYPE_NODE 10 DocumentType node, such as <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE 11 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 类型之间的关系:

【JS DOM】01—了解 JavaScript 中的文档对象模型

 

请注意,getElementById() 和 querySelector() 返回具有 Element 类型的对象,而 getElementsByTagName() 或 querySelectorAll() 返回 NodeList,它是节点的集合。

节点关系
任何节点都与 DOM 树中的其他节点有关系。 这些关系与传统家谱中描述的关系相同。

例如,<body> 是 <html> 节点的子节点,而 <html> 是 <body> 节点的父节点。

<body> 节点是 <head> 节点的兄弟节点,因为它们共享同一个直接父节点,即 <html> 元素。

下图说明了节点之间的关系:

【JS DOM】01—了解 JavaScript 中的文档对象模型

总结

HTML 或 XML 文档可以表示为节点树,就像传统的家谱一样。

每个标记都可以表示为具有特定节点类型的节点。

元素是一种特定类型的节点,节点类型为 Node.ELEMENT_NODE。

在 DOM 树中,一个节点与其他节点有关系。

© 版权声明

相关文章

暂无评论

暂无评论...