JavaScript getElementsByClassName

Usage:

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

Syntax:

var elements = document.getElementsByClassName(className);

• className is a string representing the name of the class attribute to match.

Return Value:

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

Example:

<div class="exampleClass">Element 1</div>
<div class="exampleClass">Element 2</div>

var elements = document.getElementsByClassName('exampleClass');
console.log(elements); // Output: HTMLCollection [ <div class="exampleClass">Element 1</div>, <div class="exampleClass">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 class name, getElementsByClassName() returns an empty HTMLCollection, not null.

Browser Support:

• getElementsByClassName() is supported in modern browsers and IE9+.

 

Key Points

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