DOM查询方法核心区别在于返回类型、动态性、选择能力、适用范围和性能：getElementById取单个ID元素；getElementsByClassName/TagName返回动态HTMLCollection；querySelector/All支持CSS选择器且返回静态NodeList；父子兄弟关系方法适用于结构固定场景。
JS 中 DOM 查询方法的核心区别在于返回类型、动态性、选择能力、适用范围和性能表现。选错方法容易导致取不到元素、遍历异常、逻辑崩溃，甚至线上事故。关键不是“哪个更好”，而是“哪个更准、更稳、更省事”。
按唯一 ID 快速取单个元素：getElementById
适合有稳定 id 的场景，比如页头、主内容区、模态框容器等全局唯一节点。
- 返回真实 Element 对象（不是数组），可直接调用
.style、.addEventListener()等 - ID 必须全局唯一；重复时只返回第一个，行为不可靠
- 只能在
document上调用，不能用于子元素（如div.getElementById()会报错） - 找不到时返回
null，使用前建议加判断：if (el) { ... }
按类名或标签批量取元素：getElementsByClassName / getElementsByTagName
适合处理一组结构相似的元素，比如导航菜单项、列表项、按钮组等。
- 返回的是动态 HTMLCollection：DOM 变化后集合自动更新，但循环中删除元素会导致索引错乱
- 支持在任意元素上调用，例如
formEl.getElementsByTagName('input')，可限定查找范围 - 类名支持多值写法：
getElementsByClassName('btn primary')，但要求顺序和空格完全一致 - 标签名不区分大小写，
getElementsByTagName('DIV')和'div'效果一样
用 CSS 选择器灵活定位：querySelector / querySelectorAll
现代开发首选，语义清晰、表达力强，能应对绝大多数复杂结构。
-
querySelector返回第一个匹配元素（找不到为null）；querySelectorAll返回静态 NodeList（不会随 DOM 变动），可直接用.forEach()、.map() - 支持完整 CSS 语法：
'#user .item[data-active="true"] + .detail'一步到位 - 可在任意元素上调用：
card.querySelector('.price')，避免全局扫描 - 比动态集合更安全——尤其在增删元素的交互逻辑中，不会出现“越界访问”问题
靠位置关系就近查找：parentNode、children、nextElementSibling 等
当目标元素没有稳定 class 或 id，但嵌套结构相对固定时，这类方法抗干扰能力最强。
-
el.parentElement只返回元素节点，避开文本节点；el.parentNode可能拿到换行符等空白文本 -
list.children只含子元素，list.childNodes包含所有节点（含空格、换行） -
item.nextElementSibling跳过空白文本，比item.nextSibling更可靠 -
el.closest('.card')是事件委托常用技巧，从点击目标向上找最近匹配容器
