JavaScript DOM操作核心是理解节点关系与边界，查用getElementById/querySelector等，增需先创建再插入，删本质是断开父连接，改涵盖内容、属性、样式和结构。
JavaScript 中通过 DOM 节点操作实现元素的增删改查，核心是获取目标节点后调用对应方法。关键不在于记住所有 API，而在于理解节点关系（父、子、兄弟）和操作边界（比如插入前必须有父节点）。
查：定位元素最常用方式
查是其他操作的前提，推荐按优先级使用：
- document.getElementById("id") —— 最快，唯一 ID 必须存在且不重复
- document.querySelector("CSS选择器") —— 灵活，支持 class、属性、伪类等，只返回第一个匹配项
- document.querySelectorAll("CSS选择器") —— 返回 NodeList（类数组），需遍历处理多个元素
- parentNode.children / parentNode.childNodes —— 适合已知父节点时遍历子节点；注意 children 只含元素节点，childNodes 还包含文本、注释等节点
增：创建并插入新元素
新增分两步：先创建，再挂载到文档中。不能直接插入未挂载的节点。
- document.createElement("div") 创建元素节点；document.createTextNode("文本") 创建文本节点
- 插入方法取决于位置：
- parent.appendChild(child) —— 插入到末尾
- parent.insertBefore(newNode, referenceNode) —— 插入到 referenceNode 前面
- parent.insertAdjacentElement(position, element) —— 更灵活，position 可为 'beforebegin'、'afterbegin'、'beforeend'、'afterend'
- 示例：
div.insertAdjacentElement('beforeend', document.createElement('p'))相当于在 div 内部最后添加一个 p 元素
删：移除自身或子节点
DOM 中没有“删除”方法，本质是**从父节点断开连接**。
立即学习“Java免费学习笔记（深入）”；
- node.remove() —— 最简洁，直接移除自身（现代浏览器支持）
- parent.removeChild(child) —— 兼容性更好，但需确保 child 确实是 parent 的子节点，否则报错
- 清空子节点：parent.innerHTML = "" 或 parent.textContent = ""（后者更安全，不解析 HTML）
- 注意：remove() 不会触发 detach 事件，如需清理资源（如事件监听器），建议手动解绑再 remove
改：修改内容、属性、结构或样式
“改”涵盖范围广，按目标类型区分操作：
-
改内容：
el.textContent = "纯文本"（防 XSS）、el.innerHTML = "<span>HTML</span>"（谨慎使用） -
改属性：
el.setAttribute("data-id", "123")、el.className = "active"、el.id = "newId" -
改样式：
el.style.color = "red"（仅内联样式）；更推荐操作 class：el.classList.add("highlight")、el.classList.toggle("hidden") -
改结构：用
replaceChild(new, old)替换节点；或先insertBefore再remove()
