The getElementsByTagName() method in the HTML DOM allows the selection of elements by their tag name. It returns a collection of elements with the specified tag name within the specified document or element.
To extract any info just iterate through all the elements using the length property.
Syntax:
let elements = document.getElementsByTagName(name);
Parameters:
- elements is a collection of all the found elements in the order they appear with the given tag name.
- name is a string representing the name of the elements. The special string “*” represents all elements.
HTML DOM getElementsByTagName() method Examples
Example 1: In this example, we will change the background color of the element using document.getElementByTagName() function.
<!DOCTYPE html><html>
<head>
<title>DOM getElementsByTagName() Method</title>
</head>
<body style="text-align: center">
<p>A computer science portal for geeks.</p>
<button onclick="geek()">Try it</button>
<script>
function geek() {
let doc = document.getElementsByTagName("p");
doc[0].style.background = "green";
doc[0].style.color = "white";
}
</script>
</body>
</html>
|
Output:
HTML DOM getElementsByTagName() Method
Explanation:
- In the above example we defines an HTML document with a title, heading, paragraph, and a button.
- When the button is clicked, the geek() function is called, which modifies the style of the first paragraph.
- It uses document.getElementsByTagName() to select all <p> elements and applies style changes to the first one.
- The paragraph’s background color is set to green, and its text color is set to white.
Example 2: In this example, we will change the properties of multiple elements using document.getElementsByTagName() function.
<!DOCTYPE html><html>
<head>
<title>
DOM getElementsByTagName() Method
</title>
</head>
<body style="text-align: center">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<button onclick="geek()">Try it</button>
<script>
function geek() {
let doc =
document.getElementsByTagName(
"P"
);
let i;
for (i = 0; i < doc.length; i++) {
doc[i].style.backgroundColor =
"green";
doc[i].style.color = "white";
}
}
</script>
</body>
</html>
|
Output:
HTML DOM getElementsByTagName() Method Example
Explanation:
- In this example we contains multiple paragraphs and a button.
- When the button is clicked, the geek() function is executed.
- The function selects all <p> elements using getElementsByTagName() and changes their background and text colors.
- Each paragraph’s background color is set to green, and text color to white.
HTML DOM getElementsByTagName() Method Use Cases
1. How to get the entire HTML document as a string in JavaScript ?
To get the entire HTML document as a string in JavaScript, use document.documentElement.outerHTML, which returns the HTML content including the root element as a string.
2. What are the efficient ways to iterate over all DOM elements ?
Efficient ways to iterate over all DOM elements include using `document.querySelectorAll()` for specific selections or document.getElementsByTagName(‘*’) to target all elements.
3. How to read all spans of a div dynamically ?
To dynamically read all spans within a div using getElementsByTagName(), utilize getElementsByTagName(‘span’) on the div element. Then iterate through the returned HTMLCollection to access the content of each span.
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.
HTML DOM getElementsByTagName() Method Supported Browsers
The browser supported by the getElementsByTagName() method are listed below:
We have a Cheat Sheet on JavaScript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.