JavaScript getElementsByTagName() Method

JavaScript getElementsByTagName()

Basically, the JavaScript getElementsByTagName() method is used to access HTML elements by their tag name. So that we can remove, add, replace, and modify the content inside HTML elements.

When we use this method in JavaScript, behind the scene the getElementsByTagName() method returns the live collection of the specified HTML element in the same order as in the document with an index starting from 0.

How to use getElementsByTagName() in JavaScript

The following code shows the syntax to use getElementsByTagName() in JavaScript:

document.getElementsByTagName("p");
 
// write HTML tag name e.g. p or div inside double quotes

It works like a JavaScript function that takes one argument or parameter in the form of an HTML tag name. In the above example, the argument is the name of an HTML tag which is p inside parenthesis and double quotes.

Now, how do print using getElementsByTagName()? Simply use innerHTML.

The following JavaScript code will print “Hi, This is JavaScript” inside the third number paragraph element using innerHTML.

document.getElementsByTagName('p')[2].innerHTML = "Hi, This is JavaScript!";

The complete HTML is in the following:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript getElementsByTagName()</title>
</head>
<body>
 
<h2> This is Heading</h2>
 
<p>This is a paragraph 1</p>
 
<p>This is a paragraph 2</p>
 
<h2>This is Heading</h2>
 
<p>This is a paragraph 3</p>
 
<p>This is a paragraph 4</p>
 
<!-- JavaScript Code -->
<script>
    document.getElementsByTagName('p')[2].innerHTML = "Hi, This is JavaScript!";
</script>
 
</body>
</html>

The output of the above code:

JavaScript getElementsByTagName code example

If you did notice that we used [2] to specify the third paragraph element. Why inside the third paragraph element, not the second? It’s because the index is starting from 0.

You can reduce the use of code by just assigning the getElementsByTagName() to a variable like x, y, or myVariable, etc as shown below.

let x = document.getElementsByTagName('p');

In the following example, I print inside the first and second paragraph elements.

<script>
    // created a variable x and assign it document.getElementsByTagName('p');
    let x = document.getElementsByTagName('p');
    // print inside the third paragraph element
    x[2].innerHTML = "Hi, its JavaScript";
    // print inside the first paragraph element
    x[0].innerHTML = "Hi World!"
</script>

The code output:

getElementsByTagName() multiple times

By using the length property with getElementsByTagName() as shown in the following JavaScript code, you can check the number of paragraph elements inside the HTML document.

<script>
    // created a variable x and assign it document.getElementsByTagName('p');
    let x = document.getElementsByTagName('p');
 
    // to print the number of elements
    alert(x.length + " paragraph elements found!");
</script>

The code will show an alert when the page will loads. First, I stored getElementsByTagName() inside a JavaScript variable then I used it. I used “+” to concatenate the string.

The above code will print 4 because we have 4 <p> paragraph elements in the HTML document. Our HTML document is not so big. Although, this tactic is very helpful if you have a larger HTML document.

Printing JavaScript number of elements

This is how the JavaScript getElementsByTagName() works.

Related Tutorial: JavaScript getElementById() Method

If you have any questions related to this tutorial, free free to ask in the comment section below.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top