Question

I am creating a function which has a for loop that runs through each tag in a specific div. for example, here would be the div:

<div>
 <input id="inputid"></input>
 <a id="aid"></a>
 <div id="divid"></div>
</div>

is there a “for each tag in x” kind of function in javascript that would allow me to loop through it? keep in mind that I can’t do this in jquery and each tag will likely be different, as shown above.

Answer 1

If you want all elements that are contained within a div (including children of children, etc…) and you want only elements (not other types of nodes) and you want it to work in all browsers then you can use getElementsByTagName("*") like this:

var allTags = document.getElementById('container').getElementsByTagName("*");
for (var i = 0, len = allTags.length; i < len; i++) {
    // allTags[i] is an element within the container object
    // allTags[i].id is the id of the element (if there is one)
}

document.getElementById('container') is just some means to get the container element – you can use any method that is appropriate to get the containing parent element.

getElementsByTagName("*") can take a wildcard as shown so it returns all elements contained within the node and it can be called on any element to retrieve elements only from within that containing element.