DOM（文档对象模型）是 HTML 在内存中的对象树。JavaScript 通过它读取或修改页面结构与内容。

document querySelector textContent appendChild
图：从选择器到修改文本与属性的常见路径

常用三板斧

const title = document.querySelector("h1");
title.textContent = "更新后的标题";

const list = document.querySelector("#list");
const item = document.createElement("li");
item.textContent = "新条目";
list.appendChild(item);

原则

  • 优先 textContent 设置纯文本，减少 XSS 风险。
  • 批量插入可用 DocumentFragment，减少重排。
  • 能用 CSS 类切换样式，就少直接改 style。