JavaScript DOM节点选择方法按需匹配、精准定位：getElementById高效取单元素；getElementsByClassName/TagName返回动态HTMLCollection；querySelector/All支持CSS选择器、返回静态NodeList；父子兄弟关系属性用于就近查找。
javascript 中 dom 节点选择与查询方法的核心在于“按需匹配、精准定位”。不同方法返回的数据类型、适用场景和性能表现差异明显，选错可能导致取不到元素、遍历出错或逻辑失效。
按唯一标识快速定位：getElementById
适用于有明确 id 的单个元素，效率最高，返回的是真实 DOM 元素对象（不是数组），可直接操作。
-
document.getElementById("header")返回<header id="header">元素；若 ID 不存在，返回null - ID 必须全局唯一，重复 ID 时只返回第一个匹配项，行为不可靠
- 只能在
document上调用，不能用于子元素调用（如div.getElementById()无效）
按类名或标签批量获取：getElementsByClassName / getElementsByTagName
适合需要处理多个同类元素的场景，但注意它们返回的是动态的 HTMLCollection，会随 DOM 变化自动更新。
-
document.getElementsByClassName("btn")获取所有含btn类的元素，支持多类名写法如"btn primary"（顺序必须一致） -
document.getElementsByTagName("li")获取全部<li>，标签名不区分大小写 - 可在任意元素上调用，例如
navEl.getElementsByTagName("a")限定在导航内查找链接
用 CSS 选择器灵活筛选：querySelector / querySelectorAll
现代开发中最常用的方式，语法强大、语义清晰，支持几乎所有 CSS 选择器写法。
-
document.querySelector(".card:first-child")返回第一个匹配的卡片元素 -
document.querySelectorAll("input[type='text'], textarea")返回所有文本输入框和文本域，返回静态NodeList（不会随 DOM 变动） - 查不到时，
querySelector返回null，querySelectorAll返回空NodeList，不会报错
通过节点关系就近查找：parentNode、children、nextElementSibling 等
当目标元素没有稳定 ID 或 class，但位置相对固定时，这类方法更可靠，避免依赖全局结构变化。
立即学习“Java免费学习笔记（深入）”；
-
btn.parentElement获取按钮的父容器（仅元素节点，不含文本） -
list.children获取列表的所有直接子元素（排除空白文本节点） -
item.nextElementSibling获取下一个兄弟元素，跳过换行或空格等文本节点 - 注意区分
firstChild（可能为空白文本）和firstElementChild（只认元素）
