DOM 中 API 的简介

DOM（文档对象模型）是一个表示和交互网页内容的树形结构。它允许 JavaScript 动态地访问和操作 HTML 和 CSS，为前端开发人员提供了强大的工具。通过 DOM，您可以访问和修改页面上的元素、样式、属性和事件处理程序。

DOM 的优点：

• 操作 HTML 和 CSS： DOM 允许您动态地更改页面内容和样式，而无需直接操作 HTML 或 CSS 文件。
• 分离内容和表示： DOM 将内容和表示分离，使您可以在不影响内容的情况下更改页面的外观。
• 交互性： DOM 使您可以响应用户输入，例如单击、鼠标悬停和键盘事件。

DOM API

DOM API 由一系列方法和属性组成，允许您访问和操作 DOM 树。以下是 DOM API 的一些最常用的方法：

• document.getElementById()： 返回具有指定 ID 的元素。
• document.getElementsByClassName()： 返回具有指定类名的所有元素。
• element.appendChild()： 将子元素添加到指定元素中。
• element.removeChild()： 从指定元素中删除子元素。
• element.setAttribute()： 设置元素的属性。
• element.getAttribute()： 获取元素的属性。
• element.addEventListener()： 添加事件监听器到元素。

元素属性

DOM 元素具有各种属性，可以用来获取和设置元素的信息和状态。以下是几个最常用的元素属性：

• id： 元素的唯一标识符。
• className： 元素的 CSS 类名。
• innerHTML： 元素的 HTML 内容。
• innerText： 元素的文本内容。
• style： 元素的 CSS 样式。

事件处理

DOM 事件处理允许您响应用户的交互。当用户与页面上的元素交互时，例如单击、悬停或按下键盘，就会触发事件。您可以使用 element.addEventListener() 方法为元素添加事件监听器。

例：

const button = document.getElementById("my-button");

button.addEventListener("click", () => {
  alert("Button clicked!");
});

结论

DOM API 为 JavaScript 提供了强大的工具，用于动态访问和操作 HTML 和 CSS。通过理解 DOM API 的基础知识，您可以创建交互式和动态的 web 页面。从获取和设置元素属性到响应用户交互，DOM API 使前端开发人员能够创建丰富的用户体验。