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.
Example 1: In this example, we will change the background color of the element using document.getElementByTagName() function.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<script>
function geek() {
let doc = document.getElementsByTagName("p");
doc[0].style.background = "green";
doc[0].style.color = "white";
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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.
Note : We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.