在前端开发中，DOM（文档对象模型）操作是 JavaScript 与 HTML 页面交互的核心。无论是查找页面元素、修改内容样式，还是绑定用户交互事件，都离不开 DOM 操作。本文将通过多个实战案例，从基础到进阶，系统讲解 JavaScript DOM 操作的核心知识点，帮助初学者快速上手。

一、DOM 核心基础：查找页面元素

要操作 DOM 元素，首先需要通过 JavaScript 找到目标元素。常用的元素查找方法有 4 种，下面通过案例逐一讲解。

1.1 实战案例：4 种元素查找方法对比
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 元素查找</title>
</head>
<body>
    <div id="context">
        <p class="text">第一段文字</p>
        <p class="text">第二段文字</p>
        <p class="ptext">第三段文字</p>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
        </ul>
    </div>

    <script>
        // 1. 通过 ID 查找（返回单个元素，ID 需唯一）
        const contextById = document.getElementById("context");
        console.log("通过 ID 查找:", contextById); // 输出 <div id="context">...</div>

        // 2. 通过类名查找（返回 HTMLCollection 集合，需遍历）
        const textByClass = document.getElementsByClassName("text");
        console.log("通过类名查找:", textByClass); // 输出 HTMLCollection(2) [p.text, p.text]
        console.log("类名查找第 1 个元素:", textByClass[0]); // 输出 <p class="text">第一段文字</p>

        // 3. 通过标签名查找（返回 HTMLCollection 集合，需遍历）
        const pByTag = document.getElementsByTagName("p");
        console.log("通过标签名查找:", pByTag); // 输出 HTMLCollection(3) [p.text, p.text, p.ptext]

        // 4. 通过 CSS 选择器查找（灵活度最高，返回 NodeList 集合）
        // 4.1 查找所有 ul 下的 li
        const allLi = document.querySelectorAll("ul li");
        console.log("CSS 选择器查找所有 li:", allLi); // 输出 NodeList(3) [li, li, li]

        // 4.2 查找 ul 下的第一个 li（:first-child 伪类）
        const firstLi1 = document.querySelectorAll("ul li:first-child");
        console.log("CSS 选择器查找第一个 li（:first-child）:", firstLi1); // 输出 NodeList [li]

        // 4.3 查找 ul 下的第一个 li（:nth-child(1) 伪类，1 代表索引，从 1 开始）
        const firstLi2 = document.querySelectorAll("ul li:nth-child(1)");
        console.log("CSS 选择器查找第一个 li（:nth-child(1)）:", firstLi2); // 输出 NodeList [li]
    </script>
</body>
</html>

1.2 关键知识点总结

查找方法 返回值类型 特点 适用场景
getElementById() 单个 DOM 元素 ID 唯一，查找速度最快 查找唯一元素（如页面容器）
getElementsByClassName() HTMLCollection 按类名查找，实时更新（动态集合） 查找多个同类元素
getElementsByTagName() HTMLCollection 按标签名查找，实时更新（动态集合） 查找多个同标签元素
querySelectorAll() NodeList 支持 CSS 选择器，非实时更新（静态集合） 复杂查找（如伪类、层

注意：HTMLCollection 和 NodeList 的区别：
HTMLCollection 仅包含元素节点，且是动态集合（页面元素变化时会自动更新）；
NodeList 可包含元素、文本、注释等节点，且是静态集合（页面元素变化时不会更新）。

二、DOM 内容操作：修改元素文本与 HTML

找到元素后，最常见的需求是修改元素的内容。JavaScript 提供了 textContent 和 innerHTML 两种核心方法，分别用于操作纯文本和 HTML 内容。

2.1 实战案例：修改元素内容

2.2 关键知识点总结

  

  • textContent：

    • 仅操作纯文本，忽略 HTML 标签（如 <p> 会被当作普通文本显示）；
    • 性能更优，且能避免 XSS 攻击（不会解析恶意 HTML），推荐优先使用。

  • innerHTML：

    • 会解析 HTML 标签（如 <p style="color: red;"> 会被渲染为红色文本）；
    • 存在 XSS 风险（若内容来自用户输入，可能注入恶意脚本），需谨慎使用。

三、DOM 样式操作：修改元素 CSS 样式

通过 JavaScript 可以动态修改元素的 CSS 样式，核心是通过 element.style 属性操作行内样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM 样式修改</title>
    <style>
        /* 初始样式 */
        .box {
            padding: 20px;
            margin: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="styleBox" class="box">初始样式文本</div>
    <button onclick="changeStyle()">点击修改样式</button>

    <script>
        function changeStyle() {
            // 1. 查找目标元素
            const styleBox = document.getElementById("styleBox");
            
            // 2. 修改行内样式（注意：CSS 属性名需转为驼峰命名，如 font-size → fontSize）
            styleBox.style.color = "red"; // 文字颜色改为红色
            styleBox.style.fontSize = "24px"; // 字体大小改为 24px
            styleBox.style.border = "2px solid blue"; // 边框改为蓝色实线
            styleBox.style.backgroundColor = "#f0f0f0"; // 背景色改为浅灰色
        }
    </script>
</body>
</html>

3.2 关键知识点总结

  • 样式属性命名规则：CSS 中的 - 连接符需转为驼峰命名（如 background-color → backgroundColor）；
  • 样式值格式：需符合 CSS 语法（如尺寸需加单位 px，颜色可写十六进制、RGB 等）；
  • 优先级：通过 element.style 设置的样式是行内样式，优先级高于外部 CSS（除非外部样式加了 !important）。

四、DOM 事件绑定：处理用户交互

事件绑定是前端交互的核心，通过监听用户行为（如点击、双击、滚动）触发对应的 JavaScript 逻辑。常用的事件绑定方式有 onxxx 属性和 addEventListener() 方法。

4.1 实战案例 1：常用鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM 鼠标事件</title>
    <style>
        .box {
            padding: 30px;
            margin: 20px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="eventBox" class="box">双击我试试！</div>

    <script>
        // 1. 查找目标元素
        const eventBox = document.getElementById("eventBox");
        
        // 2. 绑定双击事件（addEventListener 支持绑定多个同类型事件）
        eventBox.addEventListener("dblclick", () => {
            alert("你双击了元素！");
            eventBox.style.color = "green"; // 双击后文字变绿色
        });

        // 3. 绑定鼠标移入事件
        eventBox.addEventListener("mouseover", () => {
            eventBox.style.backgroundColor = "#e6f7ff"; // 鼠标移入时背景变浅蓝
        });

        // 4. 绑定鼠标移出事件
        eventBox.addEventListener("mouseout", () => {
            eventBox.style.backgroundColor = "white"; // 鼠标移出时背景恢复白色
        });
    </script>
</body>
</html>

4.2 实战案例 2：表单提交事件

表单提交是常见场景，需注意阻止默认提交行为（避免页面刷新）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM 表单事件</title>
</head>
<body>
    <!-- 表单元素 -->
    <form id="myForm">
        <input 
            type="text" 
            name="username" 
            required 
            placeholder="请输入用户名"
        >
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

    <script>
        // 1. 查找表单元素
        const myForm = document.getElementById("myForm");
        
        // 2. 绑定表单提交事件
        myForm.addEventListener("submit", (e) => {
            // 阻止表单默认提交行为（默认会刷新页面）
            e.preventDefault();
            
            // 获取输入框的值
            const username = myForm.username.value;
            
            // 模拟表单验证逻辑
            if (username.trim() === "") {
                alert("用户名不能为空！");
                return;
            }
            
            alert(`表单验证通过！用户名：${username}`);
            // 这里可添加 AJAX 提交逻辑（如 fetch 或 axios）
        });
    </script>
</body>
</html>

4.3 实战案例 3：窗口与文档事件

除了元素事件，窗口（window）和文档（document）也有常用事件，如页面加载、窗口缩放、滚动等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
</head>
<body>
    <!-- 模拟需要加载的大图片 -->
    <img src="https://via.placeholder.com/800" alt="大图片">

    <script>
        // 监听窗口加载事件（所有资源：图片、脚本、样式等加载完成后触发）
        window.addEventListener("load", () => {
            alert("页面所有资源已加载完成！");
        });
    </script>
</body>
</html>
案例 3.2：窗口缩放事件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>窗口缩放事件</title>
</head>
<body>
    <p id="sizeInfo">当前窗口宽度：${window.innerWidth}px</p>

    <script>
        const sizeInfo = document.getElementById("sizeInfo");
        
        // 监听窗口缩放事件
        window.addEventListener("resize", () => {
            // 更新窗口宽度信息
            sizeInfo.textContent = `当前窗口宽度：${window.innerWidth}px`;
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面滚动事件</title>
    <style>
        /* 制造足够的滚动空间 */
        body {
            height: 2000px;
        }
        .scrollInfo {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px;
            background: white;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="scrollInfo" id="scrollInfo">
        垂直滚动距离：0px
    </div>

    <script>
        const scrollInfo = document.getElementById("scrollInfo");
        
        // 监听页面滚动事件
        window.addEventListener("scroll", () => {
            // 获取垂直滚动距离（window.scrollY）
            const scrollY = window.scrollY;
            scrollInfo.textContent = `垂直滚动距离：${scrollY}px`;
        });
    </script>
</body>
</html>

4.4 关键事件总结

事件类型 常用事件 触发场景
鼠标事件 click、dblclick 鼠标单击、双击
mouseover、mouseout 鼠标移入、移出元素
表单事件 submit、reset 表单提交、重置
窗口 / 文档事件 load 页面所有资源加载完成
resize 窗口大小改变

五、总结

  1. 元素查找：掌握 getElementById、querySelectorAll 等方法的区别与适用场景；
  2. 内容与样式修改：理解 textContent 与 innerHTML 的差异，以及 element.style 的使用规则；
  3. 事件绑定：熟悉常见交互事件（如点击、滚动、表单提交），并掌握 addEventListener 的用法。

建议初学者多动手实践，通过修改案例中的代码（如更换事件类型、调整样式）加深理解，为后续学习 Vue、React 等框架打下坚实基础。

# javascript # 开发语言 # ecmascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

告别扫描文档处理烦恼：ScanTailor Advanced的智能文档优化解决方案

ScanTailor Advanced是一款专业的扫描文档后期处理工具，专为解决老旧文档数字化中的各种问题而设计。通过智能内容识别、批量处理和多线程优化，它能将倾斜、模糊、杂乱的扫描文档转化为整洁的电子文件，显著提升文档数字化效率。## 文档数字化的常见痛点与解决方案### 页面歪斜校正：智能算法自动修正传统扫描文档经常出现页面歪斜问题，手动调整每页耗时耗力。ScanTailor Adv

avatar AI Agent技术社区

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

终极指南：如何用Python自动化工具告别大麦抢票焦虑，轻松获取心仪演出门票

还记得那些让你心跳加速的抢票时刻吗？热门演唱会开票瞬间，你手忙脚乱地刷新页面，却眼睁睁看着"立即购买"按钮变灰，票在几秒内售罄。这种"拼手速"的抢票时代已经过去，现在有了基于Python开发的大麦自动抢票工具，让你告别手速焦虑，轻松获取周杰伦、五月天、周深等热门演出的门票。## 🔥 你的抢票痛点，我们都有解决方案### 场景一：热门演唱会一票难求"周杰伦演唱会开票3秒售罄，我连页面都没

avatar AI Agent技术社区