Introduction to JavaScript getElementsByTagName()
The JavaScript getElementsByTagName() function is used to return all elements of the given tag name in order they are present in the document. The getElementsByTagName() function is built in function in JavaScript. This is a function of DOM element or document object, so it is called as document.getElementsByTagName().
Syntax:
document.getElementsByTagName("tagname");Parameters:
- tagname: tagname parameter is a string parameter which specifies the tag name of an elements which we want to get. This parameter is required, it is not an optional.
The return value of this function is an array of collection of all html elements which match by the specified tag name. The return array stored elements in the sorted order of they are present in the document.
Examples of JavaScript getElementsByTagName()
Given below are the examples are mentioned:
Example #1
We will use getElementsByTagName() function to count the number of list elements available in the document by specifying “li” tag name in this function.
Code:
<!DOCTYPE html>
<head>
<title> This is an example for getElementsByTagName() function </title>
</head>
<body>
<h3> The List of Fruits are :</h3>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Orange </li>
</ul>
<p> Here we are going to count total number of fruits by getElementByTagName() function.</p>
<button onclick = "countFun()"> Count Fruits</button>
<script>
function countFun(){
var n = document.getElementsByTagName("li");
alert("The total number of fruits are : "+n.length);
}
</script>
</body>
</html>Output:
Once we click on the “Count Fruits” button the output is:
As in the above code or document the list of elements (fruits) are created and the button is created to count the list of fruits available, once we click this button it called to the countFun() function inside where it called todocument.getElementsByTagName(“li”) function which return the array of all “li” elements. From this return array the total number of “li” elements is printing as in above code.
Example #2
We will use getElementsByTagName() function to count the number of link elements available in the document by specifying “a” tag name in this function.
Code:
<!DOCTYPE html>
<head>
<title> This is an example for getElementsByTagName() function </title>
</head>
<body>
<p> Some of the important information about the india like
<a href ="https://en.wikipedia.org/wiki/History_of_India">History of India</a>,
<a href = "https://en.wikipedia.org/wiki/Economy_of_India">Economy of India</a>,
<a href = "https://en.wikipedia.org/wiki/Information_technology_in_India">Information technology in India</a>, and
<a href = "https://en.wikipedia.org/wiki/Politics_of_India">Politics of India</a>.</p>
<p> Click below button to count the number of links available in this document by getElementByTagName() function.</p>
<button onclick = "countFun()">Count Links</button>
<p id="txt"></p>
<script>
function countFun(){
var n = document.getElementsByTagName("a");
document.getElementById("txt").innerHTML ="The total number of links are : "+n.length;
}
</script>
</body>
</html>Output:
Once we click on the “Count Fruits” button the output is:
As in the above code the document contains some links to print the number of links the button is created, once we click this button it is called to the countFun() function inside where it called to document.getElementsByTagName(“a”) function which return the array of all “a” elements and then the total number of links available in document is printing.
Example #3
We will use getElementsByTagName() function to count the number of link elements available in the document and display the specified link according to order of link present in the document.
Code:
<!DOCTYPE html>
<head>
<title> This is an example for getElementsByTagName() function </title>
</head>
<body>
<p> Some of the important information about the india like
<a href ="https://en.wikipedia.org/wiki/History_of_India">History of India</a>,
<a href = "https://en.wikipedia.org/wiki/Economy_of_India">Economy of India</a>,
<a href = "https://en.wikipedia.org/wiki/Information_technology_in_India">Information technology in India</a>, and
<a href = "https://en.wikipedia.org/wiki/Politics_of_India">Politics of India</a>.</p>
<p> Click below button to count the number of links available in this document by getElementByTagName() function.</p>
<button onclick = "countFun()"> Count Links</button>
<p id="txt"></p>
Enter the link number which you want to see :<input type="number" id="linkno" value="0">
<button onclick="linkFun()">Display Link</button>
<p id="demo"></p>
<script>
function countFun(){
var n = document.getElementsByTagName("a");
document.getElementById("txt").innerHTML ="The total number of links are : "+n.length;
}
function linkFun() {
var x = document.getElementById("linkno").value;
var n = document.getElementsByTagName("a");
document.getElementById("demo").innerHTML = n[x];
}
</script>
</body>
</html>Output:
As if we click on the “Count Links” button the output is:
Suppose we want to see the 2nd link available in a documents then we will enter 1 and click “Display Link” button the output is:
Suppose we want to see the 5th link in a documents then we will enter 4 and click “Display Link” button the output is:
As in above output for the 5th link (index of an array 4) the output is displaying undefined because the document contains only 4 links which means the return array of document.getElementsByTagName( “a” ) contain all these “a”(link) elements which starts storing from index 0 to 3.
Note that we can use a wildcard symbol ( ‘*’ ) to return a collection of all the html tag elements present in the document as:
var n = document.getElementsByTagName("*");To return all the html tag elements in a specified elements, like to return a collection of all tags in the Div object as:
var n= divOb.getElementsByTagName("*");Conclusion
The getElementsByTagName() function is a built in function in JavaScript which is used to return all elements by the given tag name in order of they are present in the document.