Iterating over DOM element

Question

I am iterating DOM elements using a for loop, using 2 syntax and in both I am getting different results.

The JavaScript method 1 is

for (var sortable in document.getElementsByClassName('test')) {
           console.log("---- " + sortable)
           sortable.setAttribute('class', '');
    }

Th output for this gives error

undefined is not a function

for sortable.setAttribute('class', ''); line.

And using javascript 2 method

   var elements = document.getElementsByClassName("test");

   for (var i=0; i< elements.length;i++) {
         elements[i].setAttribute("class", "");
   }

I get the appropriate result.

My html code is

       <span class="test" id="test1">Test1 </span>
        <span class="test" id="test2">Test2 </span>
        <span class="test" id="test3">Test3 </span>

I don't know why I don't get DOM elements in var sortable in document.getElementsByClassName('test') as sortable?

If you just have a look at the logged value you will see that `sortable` is an numerical value then how can it have the `setAttribute` method ? — Arun P Johny, Aug 25 '15 at 08:45
But I am itering on `getElements` so sortable should be html element, how can it be number? — Anita, Aug 25 '15 at 08:47
Because a for in loop iterates over the object properties. It's not the same as a foreach or for-loop.. — Dieterg, Aug 25 '15 at 08:49

score 3 · Accepted Answer · edited May 23 '17 at 12:14

If you do a for .. in loop in JavaScript, it is important to know that the value returned by the for loop is actually the key and not the value.

So you could try this:

var testElements = document.getElementsByClassName('test');

for (var key in testElements) {
    var sortable = testElements[key];
    console.log("---- " + sortable)
    sortable.setAttribute('class', '');
}

However, this would fail as there are many properties defined on the value returned by getElementsByClassName, which not all return an element.

You can see them all by doing the following:

for (var key in document.getElementsByClassName('test')) {
    console.log(key);
}

This will output something like this:

0
1
2
test1
test2
test3
length
item
namedItem

You can see that not only does the returned value contain the numerical indexes, it also has the ID's as properties and also an item and namedItem property.

Unfortunatety, your for-loop also doesn't work as you are changing the class name and getElementsByClassName returns a "live" collection, which means that once you change the class, it is removed from the collection.

You can work around this with a simple loop:

var elements = document.getElementsByClassName("test");

while (elements.length > 0) {
    elements[0].setAttribute("class", "");
}

This solution was taken from: Javascript For Loop execution on dom element

Your last `for` loop will not work... see the same question http://stackoverflow.com/questions/32198445/javascript-for-loop-execution-on-dom-element — Arun P Johny, Aug 25 '15 at 09:07
@ArunPJohny Correct, I have fixed the answer. I will also link to that question. — Erik Schierboom, Aug 25 '15 at 09:15

score 0 · Answer 2 · answered Aug 25 '15 at 08:52

0

getElementsByClassName returns an array of all the elements.

For-in only iterates over objects, not arrays.

answered Aug 25 '15 at 08:52

Joel

21
7

Arrays are a type of object in JavaScript. – Rick Hitchcock Aug 25 '15 at 08:53

Iterating over DOM element

2 Answers2