Get HTML element by className
In javascript, the getElementsByClassName() method is useful to access the HTML elements using the className. The developers can use a single className multiple times in a particular HTML document. When users try to access an element using the className, it returns the collection of all objects that include a particular class.
Syntax:
document.getElementsByClassName(element_classnames);
Parameter:
It takes the multiple class names of the element which the user wants to access.
Return value:
It returns the collection of objects that have a particular class name. Users can get every element from the collection object using the index that starts from 0.
Example 1: This example demonstrates the use of the getElementsByClassName() method. It prints every element of the returned collection object into the console. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- Multiple html element with w3wiki class name --> <h1 class="w3wiki">w3wiki sample 1</h1> <h1 class="w3wiki">w3wiki sample 2</h1> <h1 class="w3wiki">w3wiki sample 3</h1> <p>DOM getElementsByclassName() Method</p> <script> // Accessing the element by getElementsByclassName method let temp = document.getElementsByClassName("w3wiki"); console.log(temp[0]); console.log(temp[1]); console.log(temp[2]); </script></body></html> |
Output:
Example 2: If a particular element contains more than one class, users can access it by passing space-separated names of the classes as a parameter of the method. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- Multiple html element with w3wiki class name --> <h1 class="w3wiki geeks">w3wiki sample 1</h1> <h1 class="w3wiki">w3wiki sample 2</h1> <h1 class="w3wiki">w3wiki sample 3</h1> <p>DOM getElementsByclassName() Method</p> <script> // Accessing the element by getElementsByclassName // method with multiple class let temp = document.getElementsByClassName( "w3wiki geeks"); console.log(temp[0]); </script></body></html> |
Output:
Different ways to access HTML elements using JavaScript
Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Document Object Model). Here, the DOM is the structure of the web page.
From the DOM, users can access HTML elements in five different ways in JavaScript:
Table of Content
- Get HTML element by Id
- Get HTML element by className
- Get HTML element by Name
- Get HTML elements by TagName
- Get HTML elements by CSS Selector