The JavaScript getElementsByTagName() method allows you to select and access HTML elements based on their tag name. It returns a collection of all the elements with the specified tag name in the document. Here is a detailed explanation along with examples of different use cases:
document.getElementsByTagName(tagName)
tagName: A string value representing the name of the HTML tag you want to select.
Return value:A collection of elements with the specified tag name. It typically returns an array-like object called a NodeList, which can be accessed using array-like notation or converted to an actual array using Array.from() or the spread syntax.
The following are some examples.
Example 1: Selecting Elements by Tag Name
HTML:
<div>Element 1</div>
<div>Element 2</div>
<p>Element 3</p>
JavaScript:
const divElements = document.getElementsByTagName('div');
const pElements = document.getElementsByTagName('p');
console.log(divElements); // Returns a NodeList containing all div elements
console.log(pElements); // Returns a NodeList containing the p element
In this example, .getElementsByTagName() is used to select all div and p elements present in the document.
Example 2: Accessing Elements by Index
HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
JavaScript:
const headingElements = document.getElementsByTagName('h1');
console.log(headingElements[0].textContent); // Returns the text of the first h1 element
console.log(headingElements[1].textContent); // Returns the text of the second h1 element
In this example, .getElementsByTagName() returns a NodeList of h1 elements. You can access each element using array-like notation with an index and get their textContent.
Example 3: Modifying Elements with a Loop
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript:
const listItems = document.getElementsByTagName('li');
for(let i = 0; i < listItems.length; i++) {
listItems[i].style.color = 'red';
}
In this example, getElementsByTagName() is used to select the li elements inside the ul tag. A for loop iterates over each element and sets the color property to red. This code will change the color of all list items to red.
getElementsByTagName() is case-insensitive. It selects elements based on their HTML tag name. If you want more specialized or specific element selection, consider using methods like .querySelectorAll() or .getElementById().