DOM
定义文档对象模型，浏览器把 HTML 解析成的可编程树状对象结构
DOM 是浏览器把 HTML 文档解析成的对象树：每个标签是一个节点，元素、属性、文本各司其职。JS 通过 document 接口查询、创建、修改、删除节点，页面随之实时更新——这是「网页行为」的技术基础。
操作 DOM 是有成本的：每次结构性修改都可能触发重排（reflow）与重绘。性能优化的核心原则是批量读写分离——先集中读取所需尺寸，再集中写入，避免「读-写-读」造成的反复布局。
- 查询：getElementById / querySelector（及其 All）；
- 创建：createElement + append/insertAdjacentHTML；
- 删除：remove()，或 replaceChildren() 批量清空。
JavaScript
// 批量写入：一次 append，只触发一次重排 const frag = document.createDocumentFragment(); items.forEach(t => { const li = document.createElement('li'); li.textContent = t; // textContent 防 XSS frag.appendChild(li); }); list.appendChild(frag);
⚠ 常见误区
- innerHTML 拼用户输入等于打开 XSS 大门，用 textContent
- 先读后写，别在循环里交替读写 offsetWidth
- querySelectorAll 返回静态 NodeList，getElementsBy 是实时的