JavaScript DOM 操作完全指南：从查找元素到增删改查

原创于 2025-07-22 10:49:23 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

DOM（Document Object Model，文档对象模型）是 JavaScript 操作网页的核心接口。它将 HTML 文档转换为一个树形结构，让我们可以通过代码增删改查元素、修改样式和内容。本文将通过实战代码，详解 DOM 操作的核心方法，帮助你快速掌握网页交互的底层逻辑。

一、DOM 基础：什么是 DOM？

简单来说，DOM 把 HTML 文档变成了一个 “对象树”—— 每个标签是一个 “节点对象”，嵌套关系对应 “父子关系”。例如：

<div id="container">
  <p class="text">Hello DOM</p>
  <ul>
    <li>Item 1</li>
  </ul>
</div>

对应的 DOM 树结构：

document（根）
└── div#container（节点）
    ├── p.text（子节点）
    └── ul（子节点）
        └── li（子节点）

所有 DOM 操作的前提：等页面加载完成。我们通常用 window.onload 包裹代码，确保元素加载后再操作：

window.onload = function() {
  // 这里写 DOM 操作代码
};

二、查找元素：如何定位节点？

操作元素的第一步是 “找到它”。DOM 提供了多种查找方法，适用于不同场景：

1. 按标识 / 类别查找

示例：

// 按 id 查找（唯一元素）
var obj = document.getElementById("aa");

// 按 class 查找（多个元素，返回数组）
var arr = document.getElementsByClassName("aa");
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = function() {
    this.style.background = "pink"; // this 指向当前点击的元素
  };
}

2. 按选择器查找（推荐）

CSS 选择器语法灵活（如 div.aa、#container > p），DOM 提供了对应的查找方法：

querySelector("选择器")：返回第一个匹配元素
querySelectorAll("选择器")：返回所有匹配元素（数组）

示例：

// 查找 class 为 aa 的 div（第一个）
var div = document.querySelector("div.aa");

// 查找所有 li 元素
var lis = document.querySelectorAll("li");

3. 按节点关系查找

如果已知一个节点，可通过 “家族关系” 查找相关节点（如父节点、子节点、兄弟节点）：

var obj = document.getElementById("aa");

// 找父节点（两种方法等价）
console.log(obj.parentNode); // 父节点（包含文本节点等）
console.log(obj.parentElement); // 父元素节点（只包含标签节点）

// 找子节点
console.log(obj.children); // 所有子元素节点（常用）
console.log(obj.childNodes); // 所有子节点（包含文本、注释等）

// 第一个/最后一个子元素
console.log(obj.firstElementChild); // 第一个子元素
console.log(obj.lastElementChild); // 最后一个子元素

// 兄弟节点
console.log(obj.previousElementSibling); // 上一个兄弟元素
console.log(obj.nextElementSibling); // 下一个兄弟元素

注意：带 Element 的方法（如 parentElement）只处理标签节点，不带的（如 parentNode）会包含文本、注释等节点，实际开发中优先用带 Element 的方法。

三、修改元素：内容、样式与属性

找到元素后，我们可以修改它的内容、样式或属性，实现动态效果。

1. 修改内容

常用两种方式，区别在于是否解析 HTML 标签：

示例：

var obj = document.getElementById("aa");
obj.innerText = "普通文本"; // 显示纯文本
obj.innerHTML = "<span style='color:red'>带样式的文本</span>"; // 显示红色文本

2. 修改样式

通过 元素.style.样式名 修改，注意：

样式名用驼峰命名（如 fontSize 对应 CSS 的 font-size）
值需带单位（如 px、%）

var obj = document.getElementById("aa");
obj.style.background = "pink"; // 背景色
obj.style.fontSize = "20px"; // 字体大小（带单位）
obj.style.color = "green"; // 文字颜色

3. 修改属性

分为 “原生属性”（如 src、href）和 “自定义属性”（如 data-id）：

var obj = document.getElementById("aa");

// 原生属性：直接通过对象.属性修改
obj.src = "new.jpg"; // 图片路径
obj.alt = "加载失败"; // 替代文本

// 自定义属性：用 get/setAttribute
console.log(obj.getAttribute("index")); // 获取自定义属性 index
obj.setAttribute("demo", "xxx"); // 设置自定义属性 demo = "xxx"

四、添加与删除元素：动态操作 DOM

DOM 允许我们创建新元素、复制已有元素，或删除不需要的元素，实现页面动态更新。

1. 创建与复制元素

createElement("标签名")：创建新元素
cloneNode(是否复制子元素)：复制已有元素（true 复制所有子元素，false 只复制自身）

// 创建新元素
var newNode = document.createElement("h1");
newNode.innerText = "新标题";
newNode.style.color = "blue";

// 复制已有元素（复制 id 为 title 的 h1，包含子元素）
var oldNode = document.getElementById("title");
var copyNode = oldNode.cloneNode(true);

2. 添加元素到页面

创建 / 复制元素后，需通过以下方法添加到 DOM 树才能显示：

示例：

var container = document.getElementById("container"); // 父容器
var p = document.querySelector("p"); // 参考元素

// 添加到容器最后
container.appendChild(newNode);

// 添加到 p 元素前面
container.insertBefore(newNode, p);

// 替换 p 元素
container.replaceChild(newNode, p);

3. 删除元素

通过父元素调用 removeChild(子元素) 删除：

var p = document.querySelector("p"); // 要删除的元素
p.parentElement.removeChild(p); // 找到父元素，删除自身

五、总结

本文通过代码示例讲解了 DOM 核心操作：

查找元素：按 id/class/ 标签 / 选择器，或通过节点关系查找
修改元素：改内容（innerText/innerHTML）、样式（style）、属性（setAttribute）
添加删除：创建 / 复制元素，添加到页面，或删除不需要的元素

DOM 操作是前端交互的基础（如表单验证、动态列表、弹窗等），核心在于 “先找到元素，再操作元素”。建议多动手练习：比如用 DOM 动态生成待办事项列表，或实现点击按钮添加 / 删除元素，加深对这些方法的理解。