DOM节点操作的核心是“查—取—改—增—删—绑”六类动作：查（querySelector等定位）、取（parentNode/childNodes等遍历）、改（innerText/setAttribute等更新）、增（appendChild/append等插入）、删（removeChild/remove等移除）、绑（addEventListener或事件委托）。
画JS节点操作的思维导图，重点不在工具或美术，而在于厘清DOM节点的逻辑层级和操作动线。核心是围绕“查—取—改—增—删—绑”六类动作，对应真实开发中对HTML元素的控制路径。
一、从DOM树结构出发定主干
思维导图中心写“DOM节点操作”，第一层分支必须是DOM的本质特征：
-
节点类型：元素节点（Element）、属性节点（Attr）、文本节点（Text）、文档节点（Document）——注意
document是根，不是html元素 - 关系链路：parentNode / childNodes / firstChild / lastChild / nextSibling / previousSibling ——强调这些属性返回的是NodeList或Node，不是数组
-
常见误区标注：比如
children只含元素节点，childNodes包含空白文本节点；innerHTML会重绘，textContent不解析标签
二、按操作意图分组方法节点
第二层不再罗列API，而是以开发者目标为分类依据：
- 找节点：querySelector / querySelectorAll（支持CSS选择器）、getElementById / getElementsByClassName / getElementsByTagName / getElementByName（注意返回类数组）
- 改内容：innerText（受CSS影响）、textContent（纯文本）、innerHTML（可插HTML，有XSS风险）、setAttribute / setAttributeNS / removeAttribute
-
动结构：appendChild / insertBefore / replaceChild / removeChild；现代推荐用
before()、after()、replaceWith()、remove()（更直观，兼容性需检查）
三、关键细节单列成子节点
每个API旁附1–2个易错点，避免导图变成API字典：
-
querySelector只返回第一个匹配项，没匹配到返回null（不是空数组） -
getElementsBy*系列返回的是实时HTMLCollection，for...in会遍历原型链，要用for...of或Array.from转换 -
createElement创建的节点是“游离态”，必须用appendChild等挂载才生效 -
cloneNode(true)深克隆会复制事件监听器吗？答案：不会——需手动重新绑定或用事件委托
四、补上上下文锚点提升实用性
导图末尾加两个横向连接分支，把节点操作拉回真实场景：
-
与事件联动：节点获取后常接
addEventListener；动态插入的节点需用事件委托（如监听document再判断event.target） -
与异步配合：DOM操作不能在
DOMContentLoaded之前执行；await fetch()后更新节点，要确保容器已存在
