DOM查询核心是定位节点，分三步：选谁（目标节点）、怎么选（四大方法及适用场景）、选完干嘛（执行时机与作用域）。
不用画复杂导图，抓住 DOM 查询的主干逻辑就能理清——核心就三件事：选谁、怎么选、选完干嘛。下面按实战逻辑分块说明。
一、DOM 查询的本质是“定位节点”
浏览器把 HTML 解析成一棵树（DOM 树），每个标签、属性、文本都是一个节点。查询就是从 document 出发，按规则找到目标节点。记住：所有查询方法都返回节点或节点集合，找不到就返回 null 或空集合。
二、四大常用查询方式及适用场景
不用死记 API，按“精度”和“灵活性”区分更实用：
- getElementById(id)：只认唯一 ID，最快最稳，适合找导航栏、模态框这类有明确 ID 的主容器
- getElementsByClassName(name) 和 getElementsByTagName(tag)：返回 HTMLCollection（实时集合），适合批量操作同类元素，比如统一隐藏所有 .loading 元素
- querySelector(selector) 和 querySelectorAll(selector)：支持 CSS 选择器语法，最灵活。前者返第一个匹配项，后者返 NodeList（静态集合）。日常开发中用得最多，例如 document.querySelector('button[data-action="submit"]')
三、两个关键细节决定查询是否可靠
很多 bug 出在忽略这两点：
-
执行时机：脚本必须在 DOM 加载完成后运行。推荐放在
DOMContentLoaded事件里，或把 script 标签放 body 底部 -
作用域限制：querySelector 不仅能查 document，还能在任意元素上调用，实现“局部查询”。例如：
formEl.querySelector('input[name="email"]')，比全局查更安全、更高效
四、思维导图可简化为一张三层结构图
手绘或用工具（如 Excalidraw、MindNode）画时，建议这样组织：
- 中心词：DOM 查询
- 第一层分支：四大方法（标出返回值类型和是否实时）
- 第二层补充：执行时机、作用域、常见陷阱（如 ID 重复、大小写敏感、伪类不支持）
- 第三层加一个真实例子：比如用 querySelectorAll('.item') 获取列表项，再 forEach 遍历绑定点击事件
真正有用的导图不是堆砌 API，而是帮你一眼看出“什么场景该用哪个方法”，以及“为什么这次没查到”。画完后盖住文字，自己默写三种查询方式的典型调用，能写对就过关了。
