querySelector 和 querySelectorAll 支持完整 CSS 选择器语法，前者返回首个匹配元素（无匹配时为 null），后者返回静态 NodeList；需转数组才能用 map/forEach；不支持伪元素，仅支持伪类；作用域限于调用对象，不解析未挂载的 HTML 字符串。
querySelector 和 querySelectorAll 是最常用的选择器 API
这两个方法支持完整的 CSS 选择器语法，能覆盖绝大多数 DOM 查找需求。querySelector 返回第一个匹配元素，querySelectorAll 返回 NodeList（类数组，但不是 Array）。
常见错误是误以为 querySelectorAll 返回的是真数组，直接调用 .map() 或 .forEach() 报错：
const items = document.querySelectorAll('.item');
items.map(x => x.textContent); // ❌ TypeError: items.map is not a function
正确做法是转成数组或用 for...of：
Array.from(items).map(x => x.textContent); // ✅ [...items].forEach(x => console.log(x)); // ✅ for (const el of items) console.log(el); // ✅
-
querySelector在找不到匹配项时返回null，不是空对象或undefined - 选择器字符串必须合法；传入
'div#id.class'没问题，但'div[foo=]'（等号后无值）会抛SyntaxError - 不支持伪元素（如
::before），只支持伪类（如:hover、:nth-child(2)）
getElementById、getElementsByClassName、getElementsByTagName 已过时但仍有兼容性价值
这些老 API 返回的是 HTMLCollection（动态集合），而 querySelectorAll 返回的是静态 NodeList。这意味着：如果 DOM 变化，getElementsByClassName 的结果会实时更新，querySelectorAll 不会。
立即学习“Java免费学习笔记（深入）”；
实际影响示例：
const els = document.getElementsByClassName('tmp');
document.body.innerHTML += '<div class="tmp">new</div>';
console.log(els.length); // 输出 1（旧集合未包含新元素？错！它会变 → 实际输出 2）
-
getElementById是唯一返回单个元素且无需遍历的老 API，性能略优于querySelector('#id')，但差异微乎其微 -
getElementsByClassName和getElementsByTagName返回的HTMLCollection支持.item(n)和[n]索引访问，但不支持数组方法 - 它们不支持复杂选择器，比如
getElementsByClassName('a b')是无效的（空格会被当作类名一部分）
closest 和 matches 解决“向上查”和“判断是否匹配”的场景
当你要从某个元素出发，往上找最近的符合条件的祖先时，closest() 比写循环 + parentNode 清晰得多；matches() 则用于判断当前元素是否满足某选择器，常用于事件委托中的条件过滤。
button.addEventListener('click', e => {
const card = e.target.closest('.card');
if (card && e.target.matches('.delete-btn')) {
card.remove();
}
});
-
closest()会检查自身是否匹配，再逐级向上；传入'body'总是返回（除非在 shadow root 内） -
matches()接受的选择器必须是合法的 CSS 选择器，但不能是相对选择器（如'+ .sibling'） - 两者都支持伪类，例如
el.matches(':disabled')、el.closest(':focus-within')
注意作用域和执行时机：选择器只在当前 document 或 element 范围内生效
querySelector 等方法默认在 document 上调用，但也可以在任意元素上调用，此时查找范围仅限该元素的后代（即“局部作用域”）。这在组件化、Shadow DOM 或模板渲染后操作中很关键。
典型陷阱：
const tmpl = `<div class="list"><span>item</span></div>`;
const div = document.createElement('div');
div.innerHTML = tmpl;
// ❌ 下面这行查不到，因为 div 还没插入文档，且 querySelector 是在 document 上调
document.querySelector('.list'); // null
// ✅ 正确方式：在 div 上调用
const list = div.querySelector('.list'); // 找到了
- 在
DOMContentLoaded或load之前调用，可能因 DOM 未就绪返回null - 在 Shadow DOM 中，需在
shadowRoot上调用，document.querySelector查不到影子树内的元素 -
document.querySelector不会跨 iframe 查找；要查 iframe 内容，得先取到iframe.contentDocument再调用
