Javascript getElementsByTagName Loop

Javascript getElementsByTagName returns a node list array collection. Javascript for loop can be used to get the value stored as HTML element at each index of the array returned by the documentElement getElementsByTagName method of Javascript. You can use the length property and item and namedItem functions of getElementsByTagName method of documentElement property of Javascript document object as we learnt in the previous article about Javascript document getElementsByTagName method. You can pass * to the getElementsByTagName method to get the array collection of all the HTML elements available in the HTML document. Here we will use the Javascript for loop through the array elements returned by the getElementsByTagName method.

Example of Javascript getElementsByTagName Loop

<script type="text/javascript" language="javascript">
    function getAllTags() {
        var arr = new Array();
        arr = document.getElementsByTagName("*");

        alert("Total Number of HTML Elements Found: " 
             + document.getElementsByTagName("*").length);

        for (var i = 0; i < arr.length; i++) {
            var tagName = 
                        document.getElementsByTagName("*").item(i).nodeName;
            var tagObj = 
                        document.getElementsByTagName("*").item(i);

            alert("TagName: "
                 + tagName
                 + "\n\ninnerText:\n" 
                 + tagObj.innerHTML);
        }
    }
</script>

Above example code for Javascript getElementsByTagName loop will return all the HTML tags as an array. For loop has been used to read each element at array index.

Following sample output will provide you the more advanced JavaScript code to fetch only required HTML elements by TagName:

Continue to next tutorial: Javascript document getElementsByName Method to learn how to get the collection of HTML elements based on value of "name" attribute.