DOM是浏览器提供的将HTML转换为JS可操作对象树的接口，通过节点关系组织元素，支持查找、修改、增删等操作，核心流程为“先找、再改、后更新”。

JavaScript DOM（文档对象模型）是浏览器提供的一套接口，用来把网页的 HTML 结构转换成 JavaScript 可识别、可操作的对象树。简单说，它让 JS 能“看懂”页面里有哪些元素，并能读取、修改、添加或删除它们。

DOM 是什么：网页的“JS 版地图”

当你打开一个网页，浏览器会把 HTML 代码解析成一棵树状结构，每个标签（比如

、）都变成一个“节点”，这些节点按父子、兄弟关系组织起来——这就是 DOM 树。JS 不直接操作 HTML 文本，而是通过 DOM 接口操作这棵树。

例如：

Hello

怎么找到网页里的元素

常用方法有这几个，选对了才能后续操作：

• document.getElementById("xxx") —— 通过 id 找唯一元素，最常用也最快
• document.querySelector("css选择器") —— 支持类名（.btn）、标签（p）、属性（[data-id]）等，只返回第一个匹配项
• document.querySelectorAll("css选择器") —— 返回所有匹配的元素，结果是 NodeList（类似数组）
• document.getElementsByClassName("xxx") 或 document.getElementsByTagName("div") —— 按类名或标签名找，返回 HTMLCollection

小提示：用 querySelector 前确保 DOM 已加载完成，否则可能找不到元素。可以放在 DOMContentLoaded 事件里，或者把 script 标签放页面底部。

怎么修改元素的内容和样式

找到元素后，就能读写它的各种属性：

• element.textContent = "新文字" —— 改纯文本内容（安全，防 XSS）
• element.innerHTML = "加粗又斜体" —— 改带 HTML 的内容（注意安全风险）
• element.style.color = "red" —— 直接改行内样式（驼峰写法，如 backgroundColor）
• element.className = "active" 或 element.classList.add("hidden") —— 控制 class，推荐用 classList 更灵活
• element.setAttribute("data-status", "done") —— 添加或修改自定义属性

怎么添加、删除或替换元素

动态更新页面离不开这些操作：

• document.createElement("div") —— 创建新元素
• parent.appendChild(newEl) —— 把新元素加到父容器末尾
• parent.insertBefore(newEl, refEl) —— 插到某个参考元素前面
• element.remove() —— 删除自身（现代写法，兼容性好）
• parent.replaceChild(newEl, oldEl) —— 替换子元素

例子：点击按钮，往列表里加一项：

const btn = document.querySelector("#addBtn");
const list = document.querySelector("#itemList");

btn.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = "新任务";
  list.appendChild(newItem);
});

DOM 操作的核心就是“先找、再改、后更新”。理解节点关系、熟悉常用 API、注意执行时机，就能稳稳控制页面行为。不复杂但容易忽略细节，多练几次就顺手了。