dom操作核心是元素节点的增、删、改、查：查用getelementbyid/queryselector等定位目标；增需先create再append，推荐documentfragment；改分内容（textcontent/innerhtml）、属性（setattribute）、样式（classlist）；删用removechild或remove，清空用innerhtml=""或循环removechild。
dom 操作核心就是围绕元素节点的增、删、改、查四个动作，用原生 javascript 实现时，关键不是记方法名，而是理解每个操作对应的“作用对象”和“执行位置”。
查：定位目标元素
查是所有操作的前提，常用方法返回的是 Element 对象（或 NodeList/HTMLCollection）：
- document.getElementById("id") —— 精准找唯一 ID，返回单个元素或 null
- document.querySelector("css-selector") —— 支持类名、标签、属性、伪类等，只返回第一个匹配项
- document.querySelectorAll("div.item[data-active]") —— 返回 NodeList，可遍历，不自动响应 DOM 变化
- element.children 或 element.childNodes —— 查子节点，注意 children 只含元素节点，childNodes 包含文本/注释节点
增：创建并插入新节点
新增分两步：先创建，再挂载。不能直接 innerHTML +=，否则会销毁已有绑定事件和表单状态。
- document.createElement("div") 创建空元素；document.createTextNode("text") 创建文本节点
- 用 parent.appendChild(newNode) 插到最后；parent.insertBefore(newNode, referenceNode) 插在指定节点前
- 批量插入推荐用 DocumentFragment：先 append 到 fragment，再一次性 append 到真实 DOM，减少重排
改：更新内容或属性
修改分三类：内容、属性、样式，各用不同 API，避免混用 innerHTML 处理纯文本。
- 改文本内容：element.textContent = "新文字"（安全，防 XSS）；element.innerText 受 CSS 影响，会触发重排
- 改 HTML 结构：element.innerHTML = "富文本"（慎用，会清空子元素事件监听器）
- 改属性：element.setAttribute("data-id", "123")；读取用 element.getAttribute("class")；布尔属性如 disabled 用 element.disabled = true
- 改样式：element.style.color = "red"（行内样式）；更推荐加/删 class：element.classList.add("active")、classList.toggle("hidden")
删：移除指定节点
删除必须通过父节点调用 removeChild，不能直接调用子节点的 remove 方法（虽然现代浏览器支持 element.remove()，但兼容性需留意）。
- parent.removeChild(childNode) —— 最兼容写法，需确保 childNode 是 parent 的直接子节点
- element.remove() —— 简洁写法，IE 不支持，如需兼容可加 polyfill 或用上面方式封装
- 清空所有子节点：element.innerHTML = "" 或 while (element.firstChild) element.removeChild(element.firstChild)；前者快但有副作用，后者更稳妥
实际写的时候，先明确你要动的是哪个节点、它在树里的位置、是否影响其他逻辑（比如事件监听器是否还在），再选对应方法。不复杂但容易忽略细节。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
