DOM操作是JS与网页结构的唯一接口；选元素用getElementById（快、专用于id）或querySelector（灵活但慢、只返首个）；改内容用textContent（安全）而非innerHTML（防XSS）；append需传节点而非字符串；注意操作时机与事件监听器丢失。
DOM 操作不是“要学的技巧”，而是你每次用 document.getElementById 或 element.innerHTML = ... 时已经在做的事——它本质就是 JS 和网页结构之间的唯一接口。
怎么拿到页面里的元素（querySelector vs getElementById）
最常踩的坑是选错方法：想改一个带 id="header" 的元素，却写了 document.querySelector(".header")（查 class 而不是 id），结果返回 null，后续调用 .innerText 就报 Cannot read property 'innerText' of null。
-
getElementById只认id，速度快、语义明确，适合有唯一 id 的场景 -
querySelector支持任意 CSS 选择器（#nav .item:first-child），灵活但慢一点，且只返回第一个匹配项 - 如果要选多个，用
querySelectorAll，它返回NodeList（不是数组，但可用[...nodeList].forEach转）
修改内容时 innerHTML 和 textContent 的区别
直接赋值 element.innerHTML = "<strong>Hello</strong>" 会解析 HTML；而 textContent = "<strong>Hello</strong>" 会原样显示为字符串——这是 XSS 风险和纯文本需求的关键分界点。
- 需要渲染用户输入的富文本？先做 HTML 转义（或用
DOMPurify.sanitize()），再塞进innerHTML - 只是更新数字、标题、提示文字？一律用
textContent，更快更安全 -
innerText看似折中，但它受 CSS 样式影响（比如display: none的元素内容不计入），行为不一致，生产环境少用
添加/删除元素为什么 append 不起作用
常见错误是把字符串当节点传给 append：container.append("<div>hi</div>")，结果什么也不显示——append 只接受 Node 对象，不是 HTML 字符串。
立即学习“Java免费学习笔记（深入）”；
- 正确做法一：先用
document.createElement("div")创建节点，再设.textContent或.innerHTML，最后append - 正确做法二：用
insertAdjacentHTML("beforeend", "<div>hi</div>")，它接受字符串且可指定插入位置 - 删元素别写
element.remove()后还去访问element.parentNode——节点已脱离 DOM，父节点是null
DOM 操作本身很简单，真正复杂的是时机和副作用：比如在 DOMContentLoaded 之前读取元素会得到 null，用 innerHTML 替换大段内容会销毁子节点绑定的事件监听器——这些不会报错，但会让功能突然失灵，得盯住控制台和元素树才容易发现。
