浏览器的 JavaScript 对象模型382

JavaScript 对象模型 (JavaScript Object Model，简称 DOM) 是一个定义如何访问和操作 HTML 和 XML 文档内容的 W3C 标准。它为脚本语言 (如 JavaScript) 提供了一个可靠的模型，让它们可以动态地与 Web 浏览器中加载的页面内容进行交互。

DOM 将文档表示为节点树。每个节点代表文档中的一个元素、属性或文本。通过 DOM，脚本可以访问、修改和创建文档内容，从而实现各种交互式 Web 应用程序，包括表单验证、动态内容加载和用户界面控件。

DOM 元素

DOM 中的每个元素由以下组成部分：* Node 节点：表示文档中的一个元素、属性或文本，具有类型和值。
* Element 元素：代表 HTML 或 XML 元素，具有标签名称、属性和子元素。
* Attribute 属性：代表元素的一个特性，具有名称和值。
* Text 文本：表示元素中的文本内容。

DOM 操作

DOM 提供了以下用于操作文档的方法：* getElementById()：根据 ID 获取元素。
* getElementsByTagName()：根据标签名称获取元素集合。
* getElementsByClassName()：根据类名获取元素集合。
* createElement()：创建一个新的元素。
* removeElement()：删除一个元素。
* appendChild()：将一个元素添加到另一个元素的末尾。
* insertBefore()：将一个元素插入到另一个元素之前。
* setAttribute()：设置元素的属性。
* getAttribute()：获取元素的属性。

DOM 事件

DOM 支持事件处理，允许脚本对用户交互和页面更改做出响应。常见的 DOM 事件包括：* click：当用户单击元素时触发。
* hover：当用户将鼠标悬停在元素上时触发。
* keypress：当用户按下一个键盘键时触发。
* load：当页面加载完成时触发。
* scroll：当用户滚动页面时触发。

示例

以下是一个使用 DOM 操作文档的 JavaScript 示例：```

// 获取 ID 为 "my-element" 的元素
const element = ("my-element");
// 设置元素的文本内容
= "Hello World!";
// 添加一个新属性
("title", "This is a new title");
// 移除元素
(element);

```

JavaScript 对象模型 (DOM) 是一个用于访问、修改和创建 Web 页面内容的强大工具。通过使用 DOM，脚本语言可以动态地与用户交互，创建交互式应用程序，并控制页面布局和外观。

2025-02-17

上一篇：深入剖析 JavaScript 中的字符串处理

下一篇：利用 JavaScript 生成范围随机数