JS 入门通关手册（13）：DOM 基础入门：用 JavaScript 操作网页元素，让页面 “活” 起来！

摘要：在掌握了 JavaScript 的核心语法（变量、函数、作用域等）之后，我们终于要进入前端开发的核心领域 ------DOM 操作。本章将带你从零开始，深入理解 DOM 的本质，掌握获取、修改、创建和删除网页元素的核心方法，并通过实战案例，让你亲手实现网页的动态交互效果，真正体会到 JavaScript 驱动网页的魅力。

标签：JavaScript、前端开发、DOM 操作、网页交互、JS 入门

一、本章学习目标 🎯

理解 DOM（文档对象模型） 的定义、树状结构及其与 HTML、JavaScript 的关系。
掌握 5 种以上获取网页元素的核心 API（如 getElementById、querySelector）。
学会修改元素的内容、样式、属性，实现网页的动态更新。
能够创建、插入和删除 DOM 节点，动态构建网页结构。
完成一个实战案例：制作一个可交互的待办事项列表（Todo List）。

二、什么是 DOM？

DOM，全称 Document Object Model（文档对象模型），是浏览器提供的一套编程接口，它将整个 HTML 文档解析成一个由对象构成的树状结构（DOM 树）。

HTML 是骨架：定义了网页的结构和内容。
DOM 是接口：提供了一套 API，让 JavaScript 可以 "看见" 和 "操作" 这个结构。
JavaScript 是肌肉：通过调用 DOM API，实现网页的动态变化和用户交互。

当浏览器加载一个 HTML 文件时，它会解析所有标签，生成一个 DOM 树。每个 HTML 元素、属性、文本都是树上的一个 "节点"。JavaScript 正是通过操作这些节点，来改变网页的外观和行为。

三、获取网页元素：找到你要操作的目标

要操作网页元素，第一步就是找到它。JavaScript 提供了多种方式来获取 DOM 元素，以下是最常用的几种：

1. 通过 ID 获取（最快、最精准）

document.getElementById('id') 方法通过元素的 id 属性查找，返回一个唯一的元素对象（因为 ID 在页面中必须唯一）。

html

预览

复制代码

<div id="app">Hello, DOM!</div>
<script>
  const app = document.getElementById('app');
  console.log(app); // <div id="app">Hello, DOM!</div>
</script>

2. 通过选择器获取（最灵活、推荐）

document.querySelector('selector') 和 document.querySelectorAll('selector') 是现代前端开发中最常用的方法，它们支持所有 CSS 选择器语法。

querySelector：返回匹配到的第一个元素。
querySelectorAll：返回匹配到的所有元素，是一个类数组对象（NodeList）。

html

预览

复制代码

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  // 获取第一个 li 元素
  const firstItem = document.querySelector('.list li');
  // 获取所有 li 元素
  const allItems = document.querySelectorAll('.list li');
  console.log(allItems); // NodeList(3) [li, li, li]
</script>

3. 其他常用方法

document.getElementsByTagName('tag')：通过标签名获取元素集合。
document.getElementsByClassName('class')：通过类名获取元素集合。

💡 小贴士 ：querySelector 和 querySelectorAll 功能更强大，性能也更优，推荐优先使用。

四、修改元素：让网页 "动" 起来

找到元素后，我们就可以通过 JavaScript 修改它的内容、样式和属性了。

1. 修改元素内容

element.textContent：修改元素的纯文本内容，会自动转义 HTML 标签，更安全。
element.innerHTML：修改元素的 HTML 内容，可以解析并渲染 HTML 标签。

html

预览

复制代码

<div id="title"></div>
<script>
  const title = document.getElementById('title');
  // 修改纯文本
  title.textContent = '新的标题';
  // 修改 HTML 内容
  title.innerHTML = '<strong>加粗的新标题</strong>';
</script>

2. 修改元素样式

通过 element.style 对象可以直接修改元素的行内 CSS 样式。注意，CSS 属性名在 JavaScript 中要使用驼峰命名法（如 backgroundColor 对应 CSS 的 background-color）。

html

预览

复制代码

<div id="box" style="width: 100px; height: 100px; background: red;"></div>
<script>
  const box = document.getElementById('box');
  // 修改背景色和宽高
  box.style.backgroundColor = 'blue';
  box.style.width = '200px';
  box.style.height = '200px';
</script>

3. 修改元素属性

使用 element.setAttribute('attr', 'value') 和 element.getAttribute('attr') 来设置和获取元素的属性。

html

预览

复制代码

<a id="link" href="https://www.example.com">链接</a>
<script>
  const link = document.getElementById('link');
  // 修改 href 属性
  link.setAttribute('href', 'https://www.google.com');
  // 获取 href 属性值
  console.log(link.getAttribute('href')); // "https://www.google.com"
</script>

五、创建与删除节点：动态构建网页

除了修改现有元素，我们还可以动态创建新元素并插入到 DOM 树中，或者删除不需要的元素。

1. 创建新元素

使用 document.createElement('tag') 方法创建一个新的元素节点。

javascript

运行

复制代码

// 创建一个新的 div 元素
const newDiv = document.createElement('div');
newDiv.textContent = '我是新创建的元素';
newDiv.className = 'new-box';

2. 插入元素到 DOM 树

创建好元素后，需要将其插入到文档中才能显示出来。常用的插入方法有：

parent.appendChild(child)：将子元素添加到父元素的最后一个子节点之后。
parent.insertBefore(newChild, referenceChild)：将新元素插入到参考元素之前。

html

预览

复制代码

<ul id="list">
  <li>Item 1</li>
</ul>
<script>
  const list = document.getElementById('list');
  const newItem = document.createElement('li');
  newItem.textContent = 'Item 2';
  // 插入到列表末尾
  list.appendChild(newItem);
</script>

3. 删除元素

使用 element.remove() 方法可以直接将元素从 DOM 树中移除。

javascript

运行

复制代码

const itemToRemove = document.querySelector('li');
itemToRemove.remove();

六、实战案例：待办事项列表（Todo List）

现在，我们将所学知识整合起来，制作一个简单的待办事项列表。

功能需求：

输入框输入任务，点击 "添加" 按钮，将任务添加到列表中。
点击任务项，可以将其标记为已完成（划掉）。
点击 "删除" 按钮，可以移除对应的任务。

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Todo List</title>
  <style>
    .completed { text-decoration: line-through; color: #999; }
    .todo-item { display: flex; justify-content: space-between; margin: 5px 0; }
  </style>
</head>
<body>
  <input type="text" id="todoInput" placeholder="输入新任务">
  <button id="addBtn">添加</button>
  <ul id="todoList"></ul>

  <script>
    const input = document.getElementById('todoInput');
    const addBtn = document.getElementById('addBtn');
    const list = document.getElementById('todoList');

    // 添加任务
    addBtn.addEventListener('click', () => {
      const taskText = input.value.trim();
      if (taskText) {
        // 创建任务项
        const li = document.createElement('li');
        li.className = 'todo-item';
        li.innerHTML = `
          <span>${taskText}</span>
          <button class="delBtn">删除</button>
        `;
        // 插入到列表
        list.appendChild(li);
        // 清空输入框
        input.value = '';
      }
    });

    // 事件委托：处理任务点击和删除
    list.addEventListener('click', (e) => {
      const target = e.target;
      // 点击任务文本，切换完成状态
      if (target.tagName === 'SPAN') {
        target.parentElement.classList.toggle('completed');
      }
      // 点击删除按钮，移除任务
      if (target.classList.contains('delBtn')) {
        target.parentElement.remove();
      }
    });
  </script>
</body>
</html>

💡 进阶提示 ：在案例中我们使用了 事件委托（Event Delegation） ，将事件监听器绑定在父元素 ul 上，而不是每个 li 上。这样即使动态添加了新的任务项，也能正常响应点击事件，这是 DOM 操作中非常重要的优化技巧。

七、通关小练习 📝

编写代码，获取页面中所有类名为 article 的元素，并将它们的背景色改为 #f0f0f0。
创建一个新的 <p> 元素，内容为 "这是一段新段落"，并将其插入到页面中 ID 为 container 的元素内部的最前面。
为页面中所有的 <a> 标签添加一个点击事件，点击时弹出该链接的 href 属性值。

八、本章总结 ✨

本章我们完成了从 "纯 JavaScript 语法" 到 "浏览器交互" 的关键跨越，核心知识点如下：

DOM 本质：是浏览器提供的 API，将 HTML 文档解析为可操作的对象树。
获取元素 ：优先使用 querySelector 和 querySelectorAll，它们灵活且强大。
修改元素 ：通过 textContent、innerHTML、style 和 setAttribute 等方法改变元素。
动态操作 ：使用 createElement、appendChild、remove 等方法创建和管理 DOM 节点。
实战思维：通过 Todo List 案例，理解了事件委托等重要的前端开发模式。

掌握了 DOM 基础，你就已经具备了开发简单交互页面的能力。下一章，我们将深入学习 DOM 事件进阶，探索更复杂的用户交互逻辑。

下一章预告：《JS 入门通关手册（14）：DOM 事件进阶：事件流、事件委托与自定义事件》