领略 JavaScript DOM 的奥秘，全面剖析基础知识

2023-12-26 12:17:08

引言

在现代 Web 开发中，JavaScript 作为一门必备的编程语言，为开发者提供了强大的能力来操作和动态修改 HTML 文档。JavaScript 文档对象模型 (DOM) 是 JavaScript 的一个关键组成部分，它允许开发者以编程的方式与 HTML 文档进行交互，从而实现复杂的网页功能和交互性。

JavaScript DOM 简介

DOM 是一种树形结构，它代表了 HTML 文档的结构和内容。DOM 中的每个元素或节点都对应着 HTML 文档中的一个元素或文本片段。通过使用 DOM API，开发者可以获取、修改、添加或删除 DOM 元素，从而动态地改变网页的内容和外观。

DOM 元素和节点

DOM 中有两种基本元素：元素和节点。元素代表 HTML 文档中的 HTML 元素，例如

、

和。节点则代表 DOM 树中的一个项目，包括元素、文本节点、注释和文档本身。

DOM 树

DOM 树是一个层次结构，其中每个元素或节点都可以包含子元素或节点。文档根节点是元素，它包含和元素。其他元素和节点则作为子元素或子节点嵌套在这些元素中，形成一个完整的文档结构。

DOM API

JavaScript 提供了一系列 DOM API，用于与 DOM 进行交互。这些 API 允许开发者：

获取元素和节点： 使用 getElementById()、getElementsByTagName() 和 querySelector() 等方法获取特定元素或节点。
修改元素和节点： 使用 innerHTML、innerText 和 style 等属性修改元素的内容、文本和样式。
遍历 DOM 树： 使用 parentNode、firstChild 和 nextSibling 等属性遍历 DOM 树并访问元素和节点。
监听文档加载事件： 使用 addEventListener() 方法监听 DOM 加载事件，例如 DOMContentLoaded 和 load，以便在文档加载完成后执行特定的操作。

DOM 操作示例

为了更好地理解 DOM API 的使用，我们来看几个示例：

// 获取具有特定 ID 的元素
const element = document.getElementById("my-element");

// 修改元素的文本内容
element.innerText = "Hello World!";

// 添加一个新的元素
const newElement = document.createElement("p");
newElement.innerText = "This is a new paragraph.";
document.body.appendChild(newElement);

// 遍历 DOM 树并打印元素的标签名
function printElementNames(element) {
  console.log(element.tagName);
  for (let i = 0; i < element.children.length; i++) {
    printElementNames(element.children[i]);
  }
}
printElementNames(document.body);

// 监听文档加载事件并执行操作
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is loaded and ready!");
});