Selecting Element by Tag getElementsbyTagName()
You already know how to access an individual page element using the document object’s getElementById() method. Another method of the document object, getElementsByTagName(), allows you to build an array populated with all of the occurrences of a particular tag.
Like getElementById(), the getElementsByTagName() method accepts a single argument. However, in this case it’s not the element ID but the required tag name that is passed to the method as an argument.
As an example, suppose you wanted to work with all of the <div> elements in a particular document. You can populate a variable with an array-like collection called myDivs by using
var myDivs = document.getElementsByTagName("div");
You don’t have to use getElementsByTagName() on the entire document. It can be applied to any individual object and return a collection of elements with the given tag name contained within that object.
Try it Yourself: Using getElementsByTagName()
Earlier you wrote a function to count the list items (<li>) inside an ordered list (<ol>) element:
function countListItems() {
var olElement = document.getElementById("toDoList");
var count = 0;
for (var i=0; i < olElement.childNodes.length; i++) {
if(olElement.childNodes[i].nodeType == 1) count++;
}
alert("The ordered list contains " + count + " items");
}
You used the childNodes array to get all the child nodes and then selected those corresponding to elements by testing for nodeType == 1.
You can easily implement the same function by using getElementsByTagName().
You start the same way by selecting the <ol> element based on its id:
var olElement = document.getElementById("toDoList");
Now you can create an array called listItems and populate it with all if the <li> elements contained in your <ol> object olElement:
var listItems = olElement.getElementsByTagName("li");
All that remains is to display how many items are in the array:
alert("The ordered list contains " + listItems.length + " items");
below contains the complete code for the page, including the revised function: countListItems().
Using getElementsByTagName()
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script>
function countListItems() {
var olElement = document.getElementById("toDoList");
var listItems = olElement.getElementsByTagName("li");
alert("The ordered list contains " + listItems.length + "
items");
}
window.onload = countListItems;
</script>
</head>
<body>
<h1>Things To Do</h1>
<ol id="toDoList">
<li>Mow the lawn</li>
<li>Clean the windows</li>
<li>Answer your email</li>
</ol>
<p id="toDoNotes">Make sure all these are completed by 8pm so you can
watch the game on TV!</p>
</body>
A further useful method for getting a collection of elements is
ocument.getElementsByClassName()
As you’ll have worked out from the method name, this method returns all the page elements having a particular value of the class attribute. However, this was not supported in Internet Explorer until IE9.