DOM 基础：网页元素操作

13.1 什么是 DOM？文档对象模型

DOM（Document Object Model） 是浏览器提供的一种编程接口，它将 HTML 文档结构化为一个树形结构，使 JavaScript 能够访问和操作网页的各个部分。

DOM 树结构：

• 文档（Document）：整个 HTML 文档
• 元素（Element）：HTML 标签，如 <div>、<p>、<h1> 等
• 属性（Attribute）：元素的属性，如 id、class、src 等
• 文本（Text）：元素内的文本内容

DOM 的作用：

• 访问和修改 HTML 元素
• 操作元素的属性和样式
• 响应用户事件
• 动态创建和删除元素

13.2 获取网页元素（5 种方法）

1. getElementById()

通过元素的 id 属性获取元素，返回单个元素。

// HTML: <div id="myDiv">Hello</div>
const element = document.getElementById("myDiv");
console.log(element); // 输出：<div id="myDiv">Hello</div>

2. getElementsByClassName()

通过元素的 class 属性获取元素，返回一个 HTMLCollection（类数组对象）。

// HTML: <div class="box">Box 1</div><div class="box">Box 2</div>
const elements = document.getElementsByClassName("box");
console.log(elements.length); // 输出：2
console.log(elements[0]); // 输出：<div class="box">Box 1</div>

3. getElementsByTagName()

通过元素的标签名获取元素，返回一个 HTMLCollection（类数组对象）。

// HTML: <p>Paragraph 1</p><p>Paragraph 2</p>
const elements = document.getElementsByTagName("p");
console.log(elements.length); // 输出：2
console.log(elements[1]); // 输出：<p>Paragraph 2</p>

4. querySelector()

通过 CSS 选择器获取元素，返回第一个匹配的元素。

// HTML: <div class="container"><p class="text">Hello</p></div>
const element = document.querySelector(".container .text");
console.log(element); // 输出：<p class="text">Hello</p>

5. querySelectorAll()

通过 CSS 选择器获取元素，返回一个 NodeList（类数组对象）。

// HTML: <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
const elements = document.querySelectorAll("ul li");
console.log(elements.length); // 输出：3
console.log(elements[2]); // 输出：<li>Item 3</li>

13.3 操作元素内容：innerText / innerHTML

innerText

innerText 属性用于获取或设置元素的文本内容，会自动忽略 HTML 标签。

// HTML: <div id="myDiv">Hello <b>World</b></div>
const element = document.getElementById("myDiv");

// 获取文本内容
console.log(element.innerText); // 输出：Hello World

// 设置文本内容
element.innerText = "Hello JavaScript";
// 此时 HTML 变为：<div id="myDiv">Hello JavaScript</div>

innerHTML

innerHTML 属性用于获取或设置元素的 HTML 内容，会保留 HTML 标签。

// HTML: <div id="myDiv">Hello <b>World</b></div>
const element = document.getElementById("myDiv");

// 获取 HTML 内容
console.log(element.innerHTML); // 输出：Hello <b>World</b>

// 设置 HTML 内容
element.innerHTML = "Hello <i>JavaScript</i>";
// 此时 HTML 变为：<div id="myDiv">Hello <i>JavaScript</i></div>

13.4 操作元素属性：src/href/class/style

操作标准属性

// HTML: <img id="myImg" src="old.jpg" alt="Old Image">
const img = document.getElementById("myImg");

// 获取属性
console.log(img.src); // 输出：http://localhost:3000/old.jpg
console.log(img.alt); // 输出：Old Image

// 设置属性
img.src = "new.jpg";
img.alt = "New Image";
// 此时 HTML 变为：<img id="myImg" src="new.jpg" alt="New Image">

操作 class 属性

// HTML: <div id="myDiv" class="box">Hello</div>
const element = document.getElementById("myDiv");

// 获取 class
console.log(element.className); // 输出：box

// 设置 class
element.className = "box red";
// 此时 HTML 变为：<div id="myDiv" class="box red">Hello</div>

// 使用 classList（推荐）
element.classList.add("blue"); // 添加类
element.classList.remove("red"); // 删除类
element.classList.toggle("active"); // 切换类
console.log(element.classList.contains("box")); // 检查类是否存在

操作 style 属性

// HTML: <div id="myDiv">Hello</div>
const element = document.getElementById("myDiv");

// 设置行内样式
element.style.color = "red";
element.style.fontSize = "24px";
element.style.backgroundColor = "#f0f0f0";
// 此时 HTML 变为：<div id="myDiv" style="color: red; font-size: 24px; background-color: #f0f0f0;">Hello</div>

// 获取样式
console.log(element.style.color); // 输出：red

13.5 操作元素样式：行内样式 / CSS 类名

行内样式

直接通过 style 属性设置，优先级最高。

const element = document.getElementById("myDiv");
element.style.cssText = "color: blue; font-size: 18px; margin: 10px;";

CSS 类名

通过修改 class 属性或 classList 来应用预定义的 CSS 类，更加灵活和可维护。

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
  .hidden {
    display: none;
  }
</style>
<div id="myDiv">Hello</div>

const element = document.getElementById("myDiv");

// 添加高亮样式
element.classList.add("highlight");

// 隐藏元素
element.classList.add("hidden");

// 显示元素
element.classList.remove("hidden");

实战：操作网页元素

实战 1：动态修改网页内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 操作示例</title>
  <style>
    .highlight {
      background-color: yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1 id="title">欢迎来到我的网站</h1>
  <p id="content">这是一段初始内容。</p>
  <button id="changeBtn">修改内容</button>
  <button id="styleBtn">添加样式</button>

  <script>
    // 获取元素
    const title = document.getElementById("title");
    const content = document.getElementById("content");
    const changeBtn = document.getElementById("changeBtn");
    const styleBtn = document.getElementById("styleBtn");

    // 点击按钮修改内容
    changeBtn.addEventListener("click", function() {
      title.innerText = "DOM 操作真有趣！";
      content.innerHTML = "这是 <b>修改后的内容</b>，使用了 innerHTML。";
    });

    // 点击按钮添加样式
    styleBtn.addEventListener("click", function() {
      content.classList.toggle("highlight");
    });
  </script>
</body>
</html>

实战 2：根据用户输入更新页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户输入示例</title>
</head>
<body>
  <input type="text" id="userInput" placeholder="请输入内容">
  <button id="submitBtn">提交</button>
  <p id="display"></p>

  <script>
    const userInput = document.getElementById("userInput");
    const submitBtn = document.getElementById("submitBtn");
    const display = document.getElementById("display");

    submitBtn.addEventListener("click", function() {
      const value = userInput.value;
      if (value) {
        display.innerText = `你输入的内容是：${value}`;
        userInput.value = ""; // 清空输入框
      } else {
        display.innerText = "请输入内容！";
      }
    });
  </script>
</body>
</html>

小结

• DOM 是浏览器提供的编程接口，将 HTML 文档结构化为树形结构
• 获取元素的方法：getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll()
• 操作元素内容：innerText（文本内容）和 innerHTML（HTML 内容）
• 操作元素属性：直接访问属性或使用 setAttribute() / getAttribute()
• 操作元素样式：通过 style 属性设置行内样式，或通过 classList 操作 CSS 类
• DOM 操作是实现网页交互的基础，是前端开发的核心技能