JavaScript DOM 介绍

JavaScript DOM（Document Object Model）

JavaScript DOM 是一种编程接口，它允许开发者通过 JavaScript 操作 HTML 和 XML 文档的内容、结构和样式。浏览器通过将文档表示为一个 树形结构，使开发者可以动态操作页面内容。

DOM 的核心概念

文档：DOM 表示整个 HTML 或 XML 文档。
节点：文档被分解为多个部分，每个部分被称为一个节点（如元素节点、文本节点等）。
树结构：DOM 使用树结构来表示文档层次，称为 DOM 树。

示例 HTML：

html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

对应的 DOM 树：


Document
 ├── html
      ├── head
      │    ├── title
      │    │    └── Text: "My Page"
      └── body
           ├── h1
           │    └── Text: "Hello, World!"
           └── p
                └── Text: "This is a paragraph."

DOM 节点类型

DOM 的所有内容都被表示为节点，主要分为以下几种：

文档节点（Document Node）：
- 整个 HTML 或 XML 文档的根节点。
- 示例：document 对象表示整个文档。
元素节点（Element Node）：
- 表示 HTML 元素，如 <div>、<p>。
- 示例：document.getElementById("example") 返回一个元素节点。
文本节点（Text Node）：
- 表示 HTML 元素的文本内容。
- 示例：element.textContent 获取文本内容。
属性节点（Attribute Node）：
- 表示元素的属性，如 id="example"。
- 示例：element.getAttribute("id") 获取属性值。

JavaScript 操作 DOM 的常用方法

1. 查找元素

JavaScript 提供了多种方式来查找 DOM 元素。

方法	描述
`document.getElementById(id)`	根据 ID 查找元素。
`document.getElementsByClassName(className)`	根据类名查找元素（返回集合）。
`document.getElementsByTagName(tagName)`	根据标签名查找元素（返回集合）。
`document.querySelector(css)`	根据 CSS 选择器查找第一个匹配的元素。
`document.querySelectorAll(css)`	根据 CSS 选择器查找所有匹配的元素（返回集合）。

示例：

javascript
// 根据 ID 查找
const header = document.getElementById("header");

// 根据类名查找
const paragraphs = document.getElementsByClassName("paragraph");

// 根据标签名查找
const divs = document.getElementsByTagName("div");

// 根据 CSS 选择器查找
const firstParagraph = document.querySelector("p");
const allParagraphs = document.querySelectorAll("p");

2. 修改内容

通过 DOM，可以动态修改页面的内容。

方法 / 属性	描述
`innerHTML`	修改或获取 HTML 内容。
`textContent`	修改或获取文本内容。
`value`	修改或获取表单元素的值。
`setAttribute()`	设置元素属性。
`removeAttribute()`	移除元素属性。

示例：

javascript
// 修改 HTML 内容
header.innerHTML = "<span>Welcome!</span>";

// 修改文本内容
header.textContent = "Welcome!";

// 修改属性
header.setAttribute("class", "new-class");

// 删除属性
header.removeAttribute("class");

3. 修改样式

通过 DOM，可以动态更改页面元素的样式。

属性 / 方法	描述
`element.style.property`	修改内联样式。
`classList.add()`	添加类名。
`classList.remove()`	移除类名。
`classList.toggle()`	切换类名（存在则移除，不存在则添加）。

示例：

javascript
// 修改内联样式
header.style.color = "blue";
header.style.fontSize = "24px";

// 添加类名
header.classList.add("highlight");

// 移除类名
header.classList.remove("highlight");

// 切换类名
header.classList.toggle("highlight");

4. 添加和删除节点

方法	描述
`document.createElement()`	创建新元素。
`parent.appendChild()`	向父元素添加子元素。
`parent.insertBefore()`	在指定位置插入子元素。
`parent.removeChild()`	从父元素中移除子元素。

示例：

javascript
// 创建新元素
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

// 添加到 DOM
document.body.appendChild(newParagraph);

// 移除元素
document.body.removeChild(newParagraph);

5. 事件监听

DOM 事件允许你对用户操作作出响应。

方法	描述
`addEventListener()`	绑定事件监听器。
`removeEventListener()`	移除事件监听器。

示例：

javascript
// 绑定事件
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

// 移除事件
button.removeEventListener("click", handleClick);

示例：动态创建列表

以下代码演示如何使用 DOM 动态生成一个列表。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic List</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    const list = document.getElementById("list");

    // 动态生成列表
    const items = ["Item 1", "Item 2", "Item 3"];
    items.forEach(item => {
      const listItem = document.createElement("li");
      listItem.textContent = item;
      list.appendChild(listItem);
    });
  </script>
</body>
</html>

输出：


- Item 1
- Item 2
- Item 3

小结

JavaScript DOM 是 Web 开发中操作页面内容的核心。它让开发者可以：

动态修改页面内容。
更改页面样式。
响应用户交互。
操作页面结构（如添加或删除元素）。

熟练掌握 DOM 操作是前端开发的基本技能，有助于构建动态和交互性强的 Web 应用。

目录