Frontend Academy · 课时

querySelector 与 querySelectorAll

Q: 「querySelector 与 querySelectorAll」这节课中我会学到什么？

使用 CSS 选择器字符串查找单个或多个元素，并了解 NodeList 与 HTMLCollection 的区别。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 选择器字符串查找单个或多个元素，并了解 NodeList 与 HTMLCollection 的区别。

querySelector 与 querySelectorAll 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 DOM？

文档对象模型是一棵由 JavaScript 对象组成的树，用来表示 HTML 结构。JavaScript 会与 DOM 交互，以读取、修改、添加和删除元素，从而使网页变得动态。

getElementById

经典的选择器。document.getElementById('myId') 会返回具有该 id 的元素；如果找不到，则返回 null。它速度很快，但只能用于 ID。

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — 单个元素

document.querySelector(cssSelector) 会返回匹配任意 CSS 选择器的第一个元素。如果没有找到匹配项，则返回 null。它比 getElementById 更灵活。

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — 多个元素

document.querySelectorAll(cssSelector) 会返回包含所有匹配元素的静态 NodeList。它不是实时数组，您必须对其进行迭代。使用 Array.from() 或展开语法后，才能使用数组方法。

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

限定范围的查询

您可以在任意元素上调用 querySelector，这样搜索范围就只限于该元素的子树，而不是整个文档。这种方式效率更高，也能避免误选页面其他部分的元素。

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList 与 HTML 集合

NodeList（由 querySelectorAll 返回）是静态的，反映的是查询时的 DOM 状态。HTML 集合（由 getElementsByClassName 等方法返回）是实时的，会随着 DOM 的变化自动更新。两者都类似数组，但都不是数组。

遍历 DOM

您可以从任意元素进行导航：element.parentElement、element.children、element.firstElementChild、element.lastElementChild、element.nextElementSibling、element.previousElementSibling。

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

检查元素是否存在

在使用查询结果前，请始终检查 querySelector 是否返回了 null，尤其是对于可能不会出现在每个页面上的元素。

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() 和 closest()

element.matches(selector) 会在元素匹配选择器时返回 true。element.closest(selector) 会沿 DOM 树向上查找，并返回第一个匹配选择器的祖先元素；如果找不到，则返回 null。

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) 会在子元素位于父元素内部（或子元素本身就是父元素）时返回 true。它适合用于检查点击是否发生在模态框或下拉菜单外部。

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

性能：减少 DOM 查询

DOM 查询并不是没有成本的。请将结果缓存到变量中，而不是反复调用 querySelector。在循环中，将 DOM 读取操作集中执行，再集中执行 DOM 写入操作，以避免布局抖动。

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

快速检查

哪个方法会返回包含所有匹配元素的静态 NodeList？

回顾：选择 DOM 元素

querySelector 返回第一个匹配项。querySelectorAll 返回包含所有匹配项的静态 NodeList。为了提高效率，请将查询范围限定在子树中。缓存查询结果。使用 closest() 实现事件委托。在使用查询到的元素前，始终检查其是否为 null。

常见问题解答

「querySelector 与 querySelectorAll」课时是免费的吗？

是的 — 「querySelector 与 querySelectorAll」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「querySelector 与 querySelectorAll」这节课中我会学到什么？

使用 CSS 选择器字符串查找单个或多个元素，并了解 NodeList 与 HTMLCollection 的区别。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「querySelector 与 querySelectorAll」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy