JavaScript 中的 DOM 对象24

概览

文档对象模型（DOM）是 HTML 和 XML 文档的应用程序编程接口（API），允许脚本和应用程序动态访问和修改文档内容、结构和样式。在 JavaScript 中，DOM 对象表示文档中的节点和元素，提供了一系列方法和属性用于访问和操作这些节点。

DOM 节点类型

DOM 节点表示文档中的一个元素或结构单位，有以下几种类型：

Element：表示 HTML 元素，如 <div>、<p> 和 <button>。
Text：表示文本节点，如文本段落或注释。
Comment：表示注释节点，如 。
Document：表示整个 HTML 文档。
DocumentFragment：表示文档的一部分，可用于离线操作。

访问 DOM 元素

可以通过以下方式访问 DOM 元素：

getElementById(id)：通过元素的 ID 访问。
getElementsByTagName(tagName)：通过标签名获取所有匹配的元素。
getElementsByClassName(className)：通过类名获取所有匹配的元素。
querySelector(selector)：使用 CSS 选择器来获取第一个匹配的元素。
querySelectorAll(selector)：使用 CSS 选择器来获取所有匹配的元素。

操作 DOM 元素

一旦访问了 DOM 元素，就可以使用以下方法和属性进行操作：

innerHTML：获取或设置元素的 HTML 内容。
innerText：获取或设置元素的文本内容。
style：获取或设置元素的样式属性。
classList：获取或操作元素的 CSS 类。
addEventListener(event, handler)：为元素添加事件侦听器。
removeEventListener(event, handler)：从元素中删除事件侦听器。

DOM 树

DOM 元素形成一个树形结构，其中 document 节点是根节点。每个元素可以有子元素，子元素可以进一步嵌套。这种树形结构反映了文档的层次结构。

DOM 操作示例

以下是一些 JavaScript DOM 操作示例：

获取具有 ID 为 "my-element" 的元素：
const element = ("my-element");
获取所有具有 "paragraph" 类的段落元素：
const paragraphs = ("paragraph");
更改元素的文本内容：
= "Hello World";
为元素添加一个 CSS 类：
("active");
为元素添加一个事件侦听器：
("click", function() {});

DOM 对象在 JavaScript 中对于动态控制和操作 HTML 和 XML 文档至关重要。通过理解 DOM 节点类型、访问和操作 DOM 元素以及 DOM 树，开发人员可以创建交互式、动态的 Web 应用程序。

2025-01-16

上一篇：JavaScript 运行机制揭秘：从引擎到执行过程

下一篇：JavaScript 编译器：将 JavaScript 代码转换成更快的机器码