JavaScript Academy · 课时

NodeList 与 HTMLCollection

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

了解元素集合之间的差异。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解元素集合之间的差异。

第 4 / 4 课13 个步骤

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

两种集合类型

DOM 方法会返回两种类似列表的对象之一：NodeList 或 HTMLCollection。它们看起来相似，但在重要方面有所不同。

NodeList 的来源

querySelectorAll 和 childNodes 会返回 NodeList 对象。querySelectorAll 返回的对象是静态的：它是在查询时获取的快照。

const items = document.querySelectorAll(".item"); // static NodeList

HTML 集合的来源

getElementsByClassName、getElementsByTagName 和 children 属性会返回动态的 HTMLCollection 对象。

const items = document.getElementsByClassName("item"); // live HTMLCollection

静态与动态

即使 DOM 发生变化，静态 NodeList 仍会保留原始内容。动态 HTML 集合则会自动反映元素的添加和移除。

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

forEach 支持

NodeList 内置了 forEach。HTMLCollection 没有，因此您必须先将其转换，或使用索引循环。

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

两者都不是真正的数组

两者都类似数组：具有 length 和索引访问能力，但缺少 map、filter 和 reduce。

const list = document.querySelectorAll(".item");
// list.map is undefined

使用 Array.from 转换

Array.from 会将这两种集合中的任意一种转换为真正的数组，从而可以使用所有数组方法。

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

使用展开语法转换

展开运算符是一种简洁的替代方式，同样可以生成真正的数组。

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

动态列表循环陷阱

遍历动态 HTML 集合时移除元素，会导致索引移动并跳过项目。请先将其转换为数组，再进行安全遍历。

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

两者都支持索引

两者都支持数字索引和 length，因此基本访问方式看起来相同，尽管它们底层的行为不同。

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

选择合适的集合

需要稳定的快照和内置的 forEach 时，使用 querySelectorAll。只有在确实需要列表与 DOM 保持同步时，才使用动态集合。

快速检查

找出其中的区别。

在交互式课程中回答

回顾

NodeList（来自 querySelectorAll）是静态的，并且具有 forEach；HTML 集合（来自 getElementsByClassName、getElementsByTagName 和 children）是动态的，没有 forEach。两者都不是真正的数组；使用 map、filter、reduce 前，请通过 Array.from 或展开语法进行转换，这样在修改集合的同时进行遍历也更安全。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 59
课程: 200

免费开始学习查看完整课程

常见问题解答

「NodeList 与 HTMLCollection」课时是免费的吗？

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

「NodeList 与 HTMLCollection」这节课中我会学到什么？

了解元素集合之间的差异。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「NodeList 与 HTMLCollection」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy