javascript操作dom的核心是“选中→读取→改写→监听”主线：精准选取元素（优先id/queryselector）、安全修改内容（textcontent/innerhtml/classlist）、高效增删节点（createelement/appendchild/remove）、合理绑定事件（addeventlistener/事件委托/及时清理）。
JavaScript 操作 DOM 的核心是获取元素、修改内容、调整结构和响应交互——关键不在记住所有 API，而在理解“选中→读取→改写→监听”这条主线。
精准选取目标元素
选不对元素，后续操作都无效。优先用语义明确、性能好的方法：
-
document.getElementById("id")：唯一 ID 最快，适合单个关键节点（如
<div id="app">） <li> <strong>document.querySelector("css选择器")</strong>：支持 class、属性、伪类等，返回第一个匹配项（如 <code>querySelector(".btn.active[data-loading]")） -
document.querySelectorAll("css选择器")：返回 NodeList，需遍历处理多个元素（如
querySelectorAll("input[type='text']")） - 避免过度使用
getElementsByTagName或getElementsByClassName，它们返回动态集合，易引发意外重计算 - 纯文本内容：用 element.textContent（防 XSS，不解析标签）
- HTML 片段：用 element.innerHTML（确保来源可信，或先用 DOMPurify 过滤）
- 属性操作：优先用 element.setAttribute("attr", "value") 或更现代的 element.attrName = value（如
el.disabled = true） - 样式控制：改 element.style.property（如
el.style.color = "red"），或增删 class：element.classList.add("hidden") - 新增元素：先用 document.createElement("tag") 创建，再设属性/内容，最后用 parent.appendChild(child) 插入
- 插入到指定位置：用 parent.insertBefore(newEl, referenceEl)（比如插在某个兄弟元素前）
- 移除节点：直接调用 element.remove()（现代写法），或 parent.removeChild(element)
- 移动已有节点：无需重新创建，直接 appendChild 或 insertBefore 即可迁移（DOM 节点移动是引用转移）
- 基础绑定：element.addEventListener("click", handler)，推荐使用命名函数便于移除
- 委托事件：对动态生成或大量子项，绑定到父容器，用 event.target.matches("selector") 判断来源（如表格行点击）
- 及时清理：在组件卸载或页面切换时，调用 element.removeEventListener("type", handler)，或用 { once: true } 自动销毁
- 避免内联事件：
onclick="doSomething()"难以维护且污染 HTML，一律改用 JS 绑定
安全修改元素内容与属性
直接拼接字符串插入 HTML 容易引发 XSS 或破坏结构，推荐分场景选择方式：
动态增删与移动节点
DOM 变更要避免频繁回流，批量操作优于逐个调用：
绑定事件并合理管理生命周期
事件绑定要兼顾功能与性能，尤其注意内存和重复绑定问题：
不复杂但容易忽略：每次 DOM 操作都触发浏览器重排重绘，高频更新（如动画、输入响应）应节流、合并或用 DocumentFragment 批量插入。
