JavaScript getElementsByTagName() method

Prereqs: this tutorial assumes that you are familiar with Arrays and their "length" property.
The DOM method getElementsByTagName() retrieves all HTML elements matching the tag name you pass as argument, and returns a collection of nodes that you can treat as an array. Surround the tag name in single or double-quotes, or JavaScript tries to look for a variable with that name. var theLinks = document.getElementsByTagName("a");
Careful: the word "element" is plural in the method name - getElementsByTagName().
An array is returned even if no element is found ⇒ use that to check if an element exists: var theLinks = document.getElementsByTagName("a"); if( theLinks.length == 0 ) // Check number of elements returned... alert("This page contains no links!"); else alert("There are " + theLinks.length + " links on this page.");
That also lets you easily access the first and last elements. Let's make our first links red: theLinks[0].style.color = "red"; // zero = first array element theLinks[1].style.color = "orange"; // 1 = second array element Knowing that "length-1" is the index of an array's last element, let's make our last link green: theLinks[ theLinks.length-1 ].style.color = "green";
To access / modify all tags on the page, use a loop to cycle through the collection: var theLinks = document.getElementsByTagName("a"); for( var i=0, j=theLinks.length; i<j; ++i ) theLinks[i].title = "Link # " + (i+1); // i must start at zero, but humans start counting at 1, thus "i+1"
Note: you don't need to store the result in a variable. Here's the equivalent code to find and make the first link red; the array index (zero, in this case) is added right after the method: document.getElementsByTagName("a")[0].style.color = "red";
To select all HTML tags on a page, use an asterisk (*) as universal selector: var allTags = document.getElementsByTagName("*");
When applied on "document", getElementsByTagName() returns *all* matching tags; but you can also extract elements inside another element. Let's fetch all links from our side navigation: var sideLinks = document.getElementById("sn").getElementsByTagName("a"); // ⇑ Defines the parent of the elements we want
Behind the scenes, jQuery uses this method when you pass an HTML tag as selector: $("a").css("color","red"); // makes all links red In fact, you can pass an element from the getElementsByTagName() collection to jQuery: var theLinks = document.getElementsByTagName("a"); $( theLinks[0] ).css("color","green"); // make first link green

Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery