How to use getElementsByTagName to retrieve elements using JavaScript HTML tags as keys

This article explains how to use JavaScript’s getElementsByTagName method to retrieve elements using the HTML tag name as a key.

Is it possible to retrieve HTML elements using tag names as keys?

Using the getElementsByTagName method, you can retrieve HTML elements using the tag name as a key.

What is the getElementsByTagName method?

The getElementsByTagName method is a JavaScript method for retrieving HTML elements.
By using this method, you can retrieve the element with the specified tag name .

This method can be called using a document object. To retrieve the element with the specified tag name, write as follows.

document.getElementsByTagName(“tag name”)

For example, if you have the following HTML

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

You can get the “p” tag by using the getElementsByTagName method as follows.

<script>
  var paragraphs = document.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
  }
</script>

When you run this program, the following results will be output to the console.

Paragraph 1
Paragraph 2
Paragraph 3

The elements obtained using this method are stored in an object called ” HTMLCollection “. “HTMLCollection” does not have methods like arrays, but you can access elements using for statements.

In addition, “HTMLCollection” is automatically updated even if the DOM contents are changed during execution.

Get the element with the tag name from within the specified parent element

The getElementsByTagName method can also retrieve elements with a tag name from within a specified parent element, instead of retrieving all elements with a specified tag name.

For example, if you have the following HTML

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

You can get the “p” tag inside the “#container” element by using the getElementById method and getElementsByTagName method as shown below.

<script>
  var container = document.getElementById("container");
  var paragraphs = container.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
  }
</script>

Summary of this article

We explained how to use the getElementsByTagName method to retrieve elements using the HTML tag name as a key.

You can easily retrieve elements using the getElementsByTagName method!

The getElementsByTagName method is a very important method in JavaScript and allows you to easily retrieve HTML elements.


This method allows you to manipulate HTML elements. 
Please master this method.