JavaScript DOM 操作实战

DOM(Document Object Model)把 HTML 文档变成一棵 JavaScript 可以操作的"对象树"。页面上的一切交互——点击、弹窗、数据渲染——本质上都是 DOM 操作。本文从获取元素讲起,一步步带你完成常见的增删改查。

1. 认识 DOM 树

浏览器解析 HTML 后,每个标签都是一个节点,document 是树的根。JS 通过它访问整棵树,所有操作都围绕"找到节点 → 改节点"展开。

2. 获取元素

// 最常用:CSS 选择器,返回第一个匹配或全部
const btn  = document.querySelector("#submit");
const items = document.querySelectorAll(".item"); // NodeList

// 按 id / 类 / 标签名
const box  = document.getElementById("box");

// 修改页面标题
document.querySelector("h1").textContent = "我的页面";

querySelectorAll 返回的是 NodeList,可以用 forEach 遍历,但不支持 map 等方法,需要时先转成数组:[...list]。

3. 修改内容与样式

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

title.textContent = "新标题";       // 纯文本,安全
title.innerHTML = "<b>带格式</b>"; // 解析 HTML,慎用!防 XSS

// 修改样式
title.style.color = "#e63946";

// 直接操作类名
title.classList.add("active");
title.classList.remove("hidden");
title.classList.toggle("selected");

动态内容请优先使用 textContent;如果确实需要 innerHTML,务必确保内容不是用户直接输入的,否则有 XSS 风险。

4. 创建与删除节点

// 创建节点
const li = document.createElement("li");
li.textContent = "新项目";
li.className = "todo-item";

// 挂到父节点
const list = document.querySelector("#todo-list");
list.appendChild(li);                    // 追加到末尾
list.insertBefore(li, list.firstChild);  // 插到最前

// 删除节点(现代写法:自己删除自己)
li.remove();

5. 属性操作

const img = document.querySelector("img");

img.src = "https://example.com/new.png";
img.alt = "替代文本";

// 通用方法
img.setAttribute("data-id", "42");
console.log(img.getAttribute("data-id")); // "42"
img.hasAttribute("data-id");              // true
img.removeAttribute("data-id");

自定义属性统一用 data- 前缀,用 dataset 读取更方便:img.dataset.id。

6. 实战:动态渲染商品列表

const products = [
  { name: "机械键盘", price: 399 },
  { name: "显示器",   price: 1299 },
  { name: "鼠标",     price: 99 },
];

const container = document.querySelector("#product-list");
container.innerHTML = "";

products.forEach((p) => {
  const div = document.createElement("div");
  div.className = "product-card";
  div.innerHTML = `<h3>${p.name}</h3><p>¥${p.price}</p>`;
  container.appendChild(div);
});

这个"数据 + 模板 + 渲染"模式是所有前端框架的雏形,理解了它,再看 Vue / React 会轻松很多。

7. 性能小贴士

减少强制回流:批量修改样式时,先用 display: none 隐藏再操作,最后再显示。
用 DocumentFragment:批量创建节点时,先挂到 fragment,再一次插入 DOM,避免反复触发渲染。

💡 打开任意网页,在控制台里用 querySelector 选中元素、改样式、增删节点,把 DOM 树"玩坏"再刷新——这是最快的上手方式。