JavaScript getElementsByTagName

Usage:

• The getElementsByTagName() method is called on the Document object to select all elements with a specific HTML tag name.

Syntax:

var elements = document.getElementsByTagName(tagName);

• tagName is a string representing the name of the HTML tag to match (e.g., 'div', 'p', 'a', etc.).

Return Value:

• The method returns a live HTMLCollection (a list of elements) of all elements in the document with the specified tag name.
• If no matching elements are found, an empty HTMLCollection is returned.

Example:

<div>Div Element 1</div>
<div>Div Element 2</div>

var divElements = document.getElementsByTagName('div');
console.log(divElements); // Output: HTMLCollection [ <div>Div Element 1</div>, <div>Div Element 2</div> ]

Accessing Elements:

• Elements in the returned HTMLCollection can be accessed using index notation or iteration.
• Individual elements can then be manipulated or accessed further using their properties and methods.

Live Collection:

• The returned collection is live, meaning it automatically updates as elements are added, removed, or modified in the document.

Null Handling:

• If no elements match the specified tag name, getElementsByTagName() returns an empty HTMLCollection, not null.

Use Cases:

• getElementsByTagName() is commonly used to select elements based on their HTML tag name, especially when dealing with groups of similar elements like paragraphs, headings, lists, etc.

 

Key Points

• getElementsByTagName() is used to select multiple elements in the document based on their HTML tag name.
• It returns a live HTMLCollection of elements, allowing dynamic manipulation and interaction.
• This method is useful for selecting and working with groups of elements sharing a common HTML tag name.