Question

I am new to document object model. Is there any java-doc like thing for DOM. I am having tough time figuring out the following javascript code.

myElements = document.getElementById('idName').elements // whose attribute is elements part of ? Element Object or Node?
for (var eachElement in myElements) {
    if (myElement[eachElement].type == 'checkbox' ) {
        // why do I have to do this? Specifically, why can't type be accessed as eachElement.type == 'checkbox'
     }
 }

I think the bigger problem is I am having tough time in accessing documentation. Any clues on both would be appreciated.

Answer 1

As already mentioned, the MDC documentation is quite comprehensive.

// why do I have to do this? Specifically, why can’t type be accessed as eachElement.type == ‘checkbox’

.elements returns a HTMLCollection ^[docs]. This is an array-like data structure which can be traversed via a for or for...in ^[docs] loop.

for...in loops over properties of objects. The property name (the index, so to speak, not its value) is stored in the loop variable, hence, to access the corresponding value, you have to write obj[prop].

That is also the reason why you should not use for...in here. You don’t know whether it also loops over other properties of the collection that are not elements.

Use a normal for loop:

var myElements = ...;
for(var i = myElements.length; i--; ) {
    var element = myElements[i];
    //...
}

I suggest to also read the JavaScript guide to learn more about loops, arrays and objects.