---

author: 专注前端开发，分享JavaScript干货
title: JavaScript入门⑥｜DOM操作详解，网页的增删改查全在这里了
update: 2026-04-28
tags: JavaScript,DOM,getElementById,querySelector,事件绑定,前端入门

作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：掌握JS基础，想操作网页元素的同学

---

前言：DOM是什么？

DOM（Document Object Model）是浏览器把HTML文档解析成的一棵树。

JavaScript通过DOM API，可以找到、修改、添加、删除页面的任何元素。

document（根）
  └── html
       ├── head
       │    └── title
       └── body
            ├── h1
            ├── div
            └── button

---

一、获取元素

<div id="app" class="container">
    <h1 class="title">标题</h1>
    <p class="desc">描述</p>
    <button id="btn">点击</button>
</div>

// 1. getElementById（最常用，性能最好）
const app = document.getElementById("app");
const btn = document.getElementById("btn");

// 2. getElementsByClassName（返回类数组）
const items = document.getElementsByClassName("container");

// 3. getElementsByTagName
const allDivs = document.getElementsByTagName("div");

// 4. querySelector（CSS选择器，只选第一个）
const title = document.querySelector(".title");
const firstBtn = document.querySelector("#btn");

// 5. querySelectorAll（CSS选择器，选所有，返回NodeList）
const allBtns = document.querySelectorAll("button");
allBtns.forEach(btn => console.log(btn.textContent));

// 6. closest（向上查找最近的祖先元素）
const child = document.querySelector(".child");
const parent = child.closest(".container");

💡 推荐：现代开发统一用 querySelector 和 querySelectorAll，语法统一且强大。

---

二、读取与修改内容

const el = document.querySelector("#title");

// 读取文本内容
console.log(el.textContent);    // "标题"（纯文本，不含HTML）
console.log(el.innerText);      // "标题"（受CSS影响，不可见内容不包含）
console.log(el.innerHTML);      // "标题"（包含HTML标签）

// 修改文本内容
el.textContent = "新标题";

// 修改HTML内容（⚠️ 慎用，有XSS风险）
el.innerHTML = '<span style="color:red">新标题</span>';

// 纯文本安全写法：
const userInput = "<script>alert('xss')</script>";
el.textContent = userInput; // 不会执行脚本，安全

---

三、读取与修改属性

const img = document.querySelector("img");
const link = document.querySelector("a");
const input = document.querySelector("input");

// 读取属性
console.log(img.src);
console.log(link.href);
console.log(input.placeholder);

// 设置属性
img.src = "new-image.jpg";
img.alt = "新图片描述";

// data-属性
const card = document.querySelector(".card");
card.dataset.id = "123";
card.dataset.name = "product";
console.log(card.dataset.id);   // "123"
console.log(card.dataset.name);  // "product"

// class操作（最常用）
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("active");     // 切换
el.classList.contains("active");   // 是否包含
el.classList.replace("old", "new");

// style操作（适合简单样式，复杂样式用CSS）
el.style.color = "red";
el.style.fontSize = "20px";
el.style.backgroundColor = "#f0f0f0"; // 注意：驼峰命名

---

四、创建与添加元素

// 1. 创建元素
const div = document.createElement("div");
div.className = "card";
div.textContent = "新卡片内容";

// 2. 添加到页面
const container = document.querySelector(".container");

// 末尾添加
container.appendChild(div);

// 开头添加
container.prepend(div.cloneNode(true)); // cloneNode可复制

// 在某个元素前/后插入
const ref = document.querySelector(".ref-element");
container.insertBefore(div, ref);

// insertAdjacentHTML（插入HTML片段，最简洁）
container.insertAdjacentHTML("beforeend", "<div>新元素</div>");
// beforeend: 元素内部的末尾
// afterbegin: 元素内部的开头
// beforebegin: 元素的前面
// afterend: 元素的后面

---

五、删除元素

const el = document.querySelector(".to-remove");

// 直接删除
el.remove();

// 或通过父元素删除
el.parentNode.removeChild(el);

// 删除前做确认
if (confirm("确定删除这个元素吗？")) {
    el.remove();
}

---

六、事件绑定

6.1 三种绑定方式

const btn = document.querySelector("#btn");

// 方式1：HTML内联（不推荐，HTML和JS耦合）
// <button onclick="handleClick()">点我</button>

// 方式2：DOM属性绑定（只绑定一个，不能重复绑定）
btn.onclick = function(event) {
    console.log("点击了！", event);
};
btn.onclick = null; // 解绑

// 方式3：addEventListener（推荐，可绑定多个）
btn.addEventListener("click", handleClick);
btn.addEventListener("click", secondHandler);
btn.removeEventListener("click", secondHandler); // 解绑特定函数

6.2 常见事件类型

// 鼠标事件
el.addEventListener("click", handler);      // 单击
el.addEventListener("dblclick", handler);    // 双击
el.addEventListener("mouseenter", handler);  // 鼠标进入
el.addEventListener("mouseleave", handler); // 鼠标离开
el.addEventListener("mousemove", handler);   // 鼠标移动

// 表单事件
input.addEventListener("focus", handler);    // 获取焦点
input.addEventListener("blur", handler);     // 失去焦点
input.addEventListener("input", handler);    // 输入时实时触发
input.addEventListener("change", handler);   // 值改变且失焦
form.addEventListener("submit", handler);    // 表单提交

// 键盘事件
document.addEventListener("keydown", handler);  // 按下
document.addEventListener("keyup", handler);    // 释放
document.addEventListener("keypress", handler); // 字符键

// 事件对象 event
input.addEventListener("keyup", function(e) {
    console.log(e.key);         // 按下的键名
    console.log(e.code);        // 物理键代码
    console.log(e.keyCode);     // 键码（已废弃）
    console.log(e.ctrlKey);    // 是否按了Ctrl
    if (e.key === "Enter") {
        console.log("按了回车！");
    }
});

6.3 事件委托（高性能，必学）

// 不给每个li单独绑定，而是给ul绑定，事件冒泡后统一处理
const list = document.querySelector(".list");

list.addEventListener("click", function(event) {
    // event.target 是实际被点击的元素
    const target = event.target;
    if (target.classList.contains("delete-btn")) {
        target.closest("li").remove();
    }
    if (target.classList.contains("edit-btn")) {
        // 编辑逻辑
    }
});

---

七、综合实战：待办事项（Todo）应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Todo应用</title>
    <style>
        body { font-family: sans-serif; max-width: 500px; margin: 40px auto; }
        input { padding: 10px; width: 70%; }
        button { padding: 10px 20px; }
        ul { list-style: none; padding: 0; }
        li { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
        li.done { text-decoration: line-through; color: #999; }
        .delete { color: red; cursor: pointer; }
    </style>
</head>
<body>
    <h1>我的待办</h1>
    <div>
        <input id="todoInput" placeholder="输入待办事项...">
        <button id="addBtn">添加</button>
    </div>
    <ul id="todoList"></ul>

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

        function addTodo() {
            const text = input.value.trim();
            if (!text) return alert("请输入内容！");

            const li = document.createElement("li");
            li.innerHTML = `
                <span class="todo-text">${text}</span>
                <span>
                    <span class="done-btn" style="cursor:pointer;margin-right:10px">✅</span>
                    <span class="delete" style="cursor:pointer">🗑️</span>
                </span>
            `;

            // 完成/取消完成
            li.querySelector(".done-btn").addEventListener("click", function() {
                li.classList.toggle("done");
            });

            // 删除
            li.querySelector(".delete").addEventListener("click", function() {
                if (confirm("删除这条待办？")) {
                    li.remove();
                }
            });

            list.prepend(li); // 添加到开头
            input.value = "";
            input.focus();
        }

        addBtn.addEventListener("click", addTodo);
        input.addEventListener("keyup", function(e) {
            if (e.key === "Enter") addTodo();
        });
    </script>
</body>
</html>

---

八、知识卡

方法	说明
getElementById	按ID获取（最快）
querySelector	CSS选择器获取第一个
querySelectorAll	CSS选择器获取全部
.textContent	读写纯文本
.innerHTML	读写HTML（慎用）
.classList	操作class
.dataset	操作data-*属性
createElement	创建元素
appendChild	添加到末尾
remove	删除元素
addEventListener	绑定事件
事件委托	性能优化技巧

---

九、课后作业

1. 实现一个功能：点击按钮，动态创建5个卡片，每个卡片显示序号，点击卡片删除自身
2. 给ul中的每个li绑定事件，要求用事件委托实现
3. 实现一个简单的心情记录器：输入内容，选择心情emoji，添加列表显示

有问题欢迎评论区留言，大家一起讨论！

---

标签：JavaScript | DOM | getElementById | querySelector | 事件绑定 | 前端入门