Furman Furman - 9 months ago 53
Javascript Question

Javascript html dom elements array for in loop

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

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

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

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,
attribute has been added to each element. Why is that happening and how can I prevent such error from happening?


document.getElementsByClassName returns an instance of NodeList, 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 NodeList, 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.

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

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 NodeList to array using Array.from(). Then you can use all array methods on it, for example .forEach():

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

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