JavaScript Academy · 课时

getElementById 和 getElementsByClassName

Q: 「getElementById 和 getElementsByClassName」这节课中我会学到什么？

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

使用经典的选择方法。

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

getElementById

getElementById 会返回具有匹配 id 的单个元素，或者返回 null。页面中的 id 必须唯一，因此此方法只会返回一个元素。

const header = document.getElementById("header");
console.log(header.tagName);

不需要井号符号

与 CSS 选择器不同，传入的是不带 # 的原始 id。传入 "#header" 将无法匹配。

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName 会返回包含指定类的所有元素组成的动态 HTMLCollection。

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

HTML 集合是动态的

该集合会随着 DOM 的变化自动更新。如果稍后添加一个新的 .card，cards.length 就会增长，无需重新查询。

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

为集合建立索引

可以通过索引访问项目。HTMLCollection 类似数组，但不是真正的数组。

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

不能直接使用 forEach

由于它类似数组但不是数组，HTMLCollection 没有 forEach。请先将其转换，或使用普通的 for 循环。

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName 会返回由指定标签的所有元素组成的动态 HTMLCollection，例如所有段落。

const paras = document.getElementsByTagName("p");
console.log(paras.length);

多个类

您可以传入由空格分隔的多个类名。元素必须包含列出的所有类，才会被纳入结果。

const items = document.getElementsByClassName("btn primary");

限定在元素范围内

这些方法也存在于元素上，此时搜索范围会限定为该元素的后代。

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

转换为数组

若要使用 map 或 filter 等数组方法，请使用展开语法将集合转换为真正的数组。

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

何时使用哪一种

需要快速进行唯一查找时，使用 getElementById。需要静态快照或复杂选择器时，优先使用 querySelectorAll；只有在确实需要动态集合时，才使用这些元素获取方法。

快速检查

选择正确的行为。

回顾

您已经学会：getElementById 根据不带 # 的原始 id 返回一个元素；getElementsByClassName 和 getElementsByTagName 返回动态的 HTML 集合。动态集合需要通过 Array.from 转换后才能使用数组方法，并且自身没有 forEach。

常见问题解答

「getElementById 和 getElementsByClassName」课时是免费的吗？

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

「getElementById 和 getElementsByClassName」这节课中我会学到什么？

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

学习 JavaScript Academy 需要有经验吗？

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

「getElementById 和 getElementsByClassName」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy