Javascript getElementsByTagName Loop

by top54u.com 03 Jul, 2008

Inside DHTML Tutorials | DOM Tutorials | HTML Tutorials | JavaScript Tutorials

Javascript Code to Change Div Object innerHTML

Javascript Create New Div HTML Element Dynamically

Javascript document getElementsByTagName

What is HTML- what does html stand for

Using HTML W3C Doctype Tag

JavaScript Startup

Create dynamic tables using HtmlControls HtmlTable

Spotlight.....

Javascript getElementsByTagName Loop

Javascript getElementsByTabName 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Javascript Get All Tags</title>

function getAllTags()

{

var arr = new Array(); arr = document.documentElement.getElementsByTagName("*");

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

for(var i=0; i < arr.length; i++)

{

var tagName = document.documentElement.getElementsByTagName("*").item(i).nodeName; switch (tagName)

{

case "DIV": var tagObj = document.documentElement.getElementsByTagName("*").item(i);

alert("TagName: " + tagName + "\n\ninnerText:\n" + tagObj.innerText); break;

case "SPAN": var tagObj = document.documentElement.getElementsByTagName("*").item(i);

alert("TagName: " + tagName + "\n\ninnerText:\n" + tagObj.innerText); break;

case "P": var tagObj = document.documentElement.getElementsByTagName("*").item(i);

alert("TagName: " + tagName + "\n\ninnerText:\n" + tagObj.innerText); break;

default:

}

</script>

</head>

<body>

First HTML div tag

</div>

Second HTML div tag

</div>

HTML paragraph p tag

</p>

<br />

Third HTML div tag

</div>

<br />

</body>

</html>

Above example code for Javascript getElementsByTagName loop will return all the HTML tags as an array. For loop is used to read each element at array index. Copy and paste the above code to create an HTML web page and run it in a web browser, click on the button, it will display the alert message box for the each HTML element matched in the switch case to display its innerText and value of id attribute.

Spotlight.....

Be the first to rate this post