forEach 在 getElementsByName 工作

Question

有人可以帮我为什么这有效吗：var quantity = document.getElementsByName("quantity");quantity.forEach(item => item.addEventListener('change',(function() {myFunction();})));但这不是：var quantity = document.getElementsByClassName("quantity");quantity.forEach(item => item.addEventListener('change',(function() {myFunction();})));输出格式是否不同？我必须改变才能得到相同的结果。当类为“quantity”的输入字段发生更改时运行函数?...

Answer 1

getElementsByName返回一个 NodeList，并且 NodeList 上确实有一个方法。forEach

相反，返回一个 HTMLCollection，并且 HTMLCollections 没有关于它们的方法。getElementsByClassNameforEach

它们在其他方面都是非常相似的类似数组的集合。

如果需要，可以使用 这两种方法进行迭代：for..of

for (const quantity of document.getElementsByClassName("quantity")) {

  quantity.addEventListener('change', myFunction);

}

与其记住所有的差异，我更喜欢总是使用，因为它返回一个静态的（更可预测的）NodeList（因此有），它也比任何其他选择方法都灵活得多（因为它可以接受任何选择器字符串）。querySelectorAllforEach

Answer 2

尝试

Array.from(quantity).forEach(item => item.addEventListener('change',(function() {myFunction();})));

document.getElementsByName 返回一个 NodeList []，该列表可作为数组进行迭代，而 getElementsByClassname 返回一个 HTMLCollection []，该列表不是。