DOM查询以document为根节点，核心方法包括getElementById、querySelector、querySelectorAll及getElementsByClassName/TagName，需结合节点关系属性如children、parentElement等实现精准操作。
DOM 查询是 JavaScript 操作页面的起点，学得扎实，后面增删改、事件绑定、动态渲染才不会卡壳。关键不是背方法，而是建立“从 document 出发 → 定位节点 → 精准取用”的思维链。
先搞懂 document 是什么，不是语法，是入口
document 不是关键词，是浏览器自动创建的全局对象，代表整个 HTML 文档。它是一切 DOM 查询的根——所有查找方法都以 document. 开头。比如 document.getElementById()，本质是“请 document 帮我找 ID 是 xxx 的那个元素”。不理解这点，就容易把 DOM 当成一堆零散 API 来记。
建议动手验证：打开任意网页按 F12，在控制台输入 document 回车，展开看它的结构；再输 document.body、document.documentElement，对比它们分别对应 HTML 中哪部分。
掌握四类核心查询方式，按使用频率排序
不用一次性学全，先聚焦最常用、最稳定的四种：
-
按 ID 查一个：
document.getElementById("id")—— 唯一、最快、兼容性最好。ID 必须唯一，适合操作导航栏、弹窗容器等关键区域。 -
按 CSS 选择器查一个：
document.querySelector("选择器")—— 写法和写 CSS 一样（如".btn.active"、"#header h1"），灵活度高，现代项目首选。 -
按 CSS 选择器查全部：
document.querySelectorAll("选择器")—— 返回 NodeList（可直接用 forEach 遍历），适合批量操作同类按钮、列表项、卡片。 -
按类名/标签名查全部：
document.getElementsByClassName("cls")或document.getElementsByTagName("div")—— 返回 HTMLCollection（类数组，需转数组才能用 map/filter），适合老项目或简单场景，注意它不支持链式写法。
⚠️ 小提醒：别再用 getElementsByName 和已废弃的 getElementByClassName（少了个 s），它们要么适用场景极窄，要么根本不存在。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
学会“向下找”和“向上找”，构建节点关系网
查到一个元素后，常需要找它的兄弟、孩子或爸爸。重点练这几个安全又实用的属性：
-
element.children—— 只返回子元素节点（忽略空格、换行等文本节点），比childNodes更干净； -
element.parentElement—— 找父元素，比parentNode更明确（后者可能返回 document 或 documentFragment）； -
element.nextElementSibling/element.previousElementSibling—— 找相邻的兄弟元素，跳过空白文本，避免踩坑； -
element.firstElementChild/element.lastElementChild—— 安全获取首尾子元素。
练习小技巧：在控制台选中一个元素（右键 → “Reveal in Elements panel”），然后输入 $0.parentElement、$0.children[0] 实时查看，$0 就是你刚点中的那个元素。
边查边用，用小任务驱动练习
光看不练等于没学。推荐两个 10 分钟内能做完的实战任务，立刻巩固查询能力：
-
任务一：高亮搜索词 —— 页面中有个输入框和一段文字。输入关键词后，用
querySelectorAll("p, li, span")找出所有段落/列表项/文字容器，再用textContent.includes(关键词)判断是否包含，匹配的加个style.backgroundColor = "#ffeb3b"； -
任务二：折叠菜单控制 —— 有多个
<h3 class="menu-title"></h3>和紧随其后的<ul class="submenu"></ul>。点击标题时，用nextElementSibling找到对应的 ul，再用classList.toggle("hidden")控制显隐。
做完会发现：查询不是终点，而是为后续操作铺路。熟练之后，“找哪个元素→怎么找→找到后干啥”，三步会自然连成一线。
