JavaScript元素获取与选择器API详解

大家好，我们又见面了啊~本文《JavaScript获取元素及常用选择器API解析》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

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 不会。

实际影响示例：

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 再调用

今天关于《JavaScript元素获取与选择器API详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！