在前端开发中，我们经常需要处理多个 DOM 元素，例如获取所有某个标签的元素列表。此时，我们可以使用 document.getElementsByTagName、document.getElementsByClassName 等方法获取一个 HTMLCollection 对象。HTMLCollection 是一个类数组对象，它包含了一组按照文档顺序排列的元素，但是它并不是一个真正的数组，因此不能使用数组的方法进行遍历操作。
如何对 HTMLCollection 进行遍历操作呢？这就需要用到 JavaScript 中的迭代器 Iterator 和 for...of 循环语句。下面通过示例代码详细介绍如何对 HTMLCollection 元素进行循环操作。
使用 for 循环遍历 HTMLCollection
最简单的方式是使用 for 循环对 HTMLCollection 进行遍历，示例代码如下：
const elements = document.getElementsByTagName('p');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i]);
}上述代码中，首先使用 document.getElementsByTagName('p') 方法获取了所有 <p> 元素，并将返回值保存在 elements 变量中。然后使用 for 循环遍历 elements 变量，输出每个元素的内容。
这种方式虽然简单，但是存在一些问题。由于 HTMLCollection 不是一个真正的数组，因此它的长度可能会随着循环过程中元素的增加或减少而改变。当 HTMLCollection 的长度改变时，for 循环的终止条件也会随之改变，可能导致意料之外的结果。
使用迭代器遍历 HTMLCollection
为了解决上述问题，我们可以使用迭代器 Iterator 对 HTMLCollection 进行遍历。对于 HTMLCollection，我们可以使用 Symbol.iterator 方法获取其默认迭代器，示例代码如下：
-- -------------------- ---- ------- ----- -------- - ----------------------------------- ----- -------- - ---------------------------- --- ---- - ---------------- ----- ------------ - ------------------------ ---- - ---------------- -
上述代码中，首先使用 document.getElementsByTagName('p') 方法获取所有 <p> 元素，并将返回值保存在 elements 变量中。然后使用 elements[Symbol.iterator]() 方法获取 elements 默认迭代器，并将迭代器保存在 iterator 变量中。接着使用 while 循环和迭代器的 next() 方法遍历 HTMLCollection 中的每个元素，并输出其内容。
使用迭代器遍历 HTMLCollection 的好处是，即使 HTMLCollection 长度发生变化，迭代器仍然能够正确地遍历所有元素。
使用 for...of 循环遍历 HTMLCollection
ES6 引入了 for...of 循环语句，它可以更方便地遍历可迭代对象，HTMLCollection 也是一个可迭代对象，因此我们可以使用 for...of 循环遍历 HTMLCollection，示例代码如下：
const elements = document.getElementsByTagName('p');
for (const element of elements) {
console.log(element);
}上述代码中，使用 document.getElementsByTagName('p') 方法获取所有 <p> 元素，并将返回值保存在 elements 变量中。然后使用 for...of 循环语句遍历 elements 变量，输出每个元素的内容。
使用 for...of 循环语句可以更加简洁明了地遍历 HTMLCollection，它也不会受到 HTMLCollection 长度变化的影响。
总结
本文介绍了三种遍历 HTMLCollection 元素的方法：for 循环、迭代器和 for...of 循环语句。对于数量较少的元素，使用 for 循环即可；对于数量较多的元素，建议使用迭代器或者 for...of 循环
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9921
