JavaScript Academy · 课时

使用 querySelector 选择元素

Q: 「使用 querySelector 选择元素」这节课中我会学到什么？

使用 CSS 选择器查找元素。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 选择器查找元素。

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

认识 querySelector

querySelector 会返回与 CSS 选择器匹配的第一个元素；如果没有匹配项，则返回 null。document 和每个元素都提供此方法。

const title = document.querySelector("h1");
console.log(title.textContent);

任何 CSS 选择器都可以使用

querySelector 的强大之处在于，它接受您在 CSS 中使用的相同选择器：标签、类、id、属性以及它们的组合。

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll 会将所有匹配的元素作为静态 NodeList 返回。即使没有匹配项，它也会返回空列表，而不是 null。

const cards = document.querySelectorAll(".card");
console.log(cards.length);

遍历结果

querySelectorAll 返回的 NodeList 直接支持 forEach，因此遍历起来很简洁。

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

后代选择器

与 CSS 一样，您可以使用空格（表示后代）来定位嵌套元素。下面的方式会找到 .product 内的所有 .price。

const prices = document.querySelectorAll(".product .price");

组合类

不加空格地链接多个类，表示元素必须同时具备所有这些类。这里我们匹配同时属于主要按钮和大号按钮的按钮。

const btn = document.querySelector("button.primary.large");

限定范围的查询

在元素上调用 querySelector（而不是在 document 上调用）时，只会在该元素内部进行搜索。这样可以让搜索保持局部并提高速度。

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

伪类

像 :first-child 和 :nth-of-type 这样的结构伪类同样有效。

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

处理没有匹配项的情况

由于 querySelector 可能返回 null，使用结果前应先进行保护性检查，以避免 TypeError。

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

属性选择器

属性选择器可以根据数据属性进行匹配。这样在连接元素时就不必依赖类，非常方便。

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector 与较旧的接口

querySelector 比 getElementById 更灵活，因为它接受任意选择器；不过，按 id 查找仍然稍快一些。请根据任务选择合适的工具。

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

快速检查

测试您对选择器的理解。

回顾

您已经学会：querySelector 返回第一个匹配项（或 null），而 querySelectorAll 返回包含所有匹配项的静态 NodeList。两者都接受完整的 CSS 选择器，也都可以将搜索范围限定在父元素内。使用 querySelector 时，务必处理 null 的情况。

常见问题解答

「使用 querySelector 选择元素」课时是免费的吗？

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

「使用 querySelector 选择元素」这节课中我会学到什么？

使用 CSS 选择器查找元素。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「使用 querySelector 选择元素」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy