用于循环的Javascript html dom元素数组

So let's say I have an array of DOM elements:

所以假设我有一个DOM元素数组:

var z = document.getElementsByClassName('name');

and for each element I want to set attribute with for in loop:

并且对于我想为in循环设置属性的每个元素:

for(var n in z){z[n].setAttribute('marked', '1');}

For above code I get z[n].setAttibute is not a function. However when I manually check in console elements of z array, marked attribute has been added to each element. Why is that happening and how can I prevent such error from happening?

对于上面的代码,我得到z [n] .setAttibute不是一个函数。但是,当我手动检查z数组的控制台元素时,已将标记的属性添加到每个元素中。为什么会发生这种情况?如何防止此类错误发生?

2 个解决方案

#1

document.getElementsByClassName returns an instance of HTMLCollection, an array-like object. for..in loop was designed for objects, not arrays. It iterates through all properties of an object. Therefore, when iterating through HTMLCollection, besides array indexes you get also other properties, like length. As length is simply a number, it doesn't have setAttribute method, so you get that error.

document.getElementsByClassName返回一个类似于数组的对象HTMLCollection的实例。 for..in循环是为对象设计的,而不是数组。它遍历对象的所有属性。因此,在迭代HTMLCollection时,除了数组索引之外,还会获得其他属性,例如length。由于length只是一个数字,因此它没有setAttribute方法,因此您会收到该错误。

You should either use a regular for loop, or for..of loop:

您应该使用常规for循环或for..of循环:

const z = document.getElementsByClassName('name')

// Regular loop:
for (let i = 0, len = z.length; i < len; i++) {
  z[i].setAttribute('marked', '1')
}

// for..of loop:
for (const element of z) {
  element.setAttribute('marked', '1')
}

You can also convert HTMLCollection to array using Array.from(). Then you can use all array methods on it, for example .forEach():

您还可以使用Array.from()将HTMLCollection转换为数组。然后你可以使用它上面的所有数组方法,例如.forEach():

const z = Array.from(document.getElementsByClassName('name'))

z.forEach(element=> element.setAttribute('marked', '1'))

#2

[].forEach.call(z, function(el) {
 el.setAttribute('marked', '1');
})

for..in will get all the keys of the HTMLCollection, including the property .length. .length is a Number and doesn't have a .setAttribute function.

for..in将获取HTMLCollection的所有键,包括属性.length。 .length是一个数字,没有.setAttribute函数。

#1