How To Get Element By Class In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of how to get element by class in JavaScript, when we want to access and get an element contained in the DOM of HTML, we can use JavaScript to get it by its id, class, or name.
In JavaScript, there are predefined methods and functions for accessing HTML components that are listed in the Document interface.
We'll learn how to access an element(s) depending on its class in this post. In this tutorial, we'll learn how to fetch elements by class name using JavaScript.
Step by step guide on how to get element by class in JavaScript :-
The getElementsByClassName method returns all elements in a document that have the same class name. All elements with the same class name are returned as array-like objects by this function.
There are two ways to call the method:
- When a method is called on the complete document, it chooses all of the items in the document that have the same class name. document.getElementsByClassName('class-name') is an example.
- When the method is used on an element (parent), it selects just the elements in the element that have the same class name (parent). parent.getElementsByClassName('class-name') as an example. getElementsByClassName, not getElementByClassName, is the name of the method. Because a webpage may contain more than one element with the same class name, elements are used.
<html>
<head>
<title></title>
</head>
<div id="app">
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">Java</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
</div>
<script>
let menu = document.getElementById('#menu');
let items = menu.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);
</style>
</body>
</html>
- To begin, type <! DOCTYPE html> to inform the web browser that the file is in HTML format.
- The <html> element, on the other hand, is used to signal the start of HTML content.
- The <head> tag now contains the information about web pages. The< title> element is used in this tag to provide a web page title. For example, the <head> and <title> tags are paired tags. As a result, both have the </head> and </title> closing tags.
- Finally, the <body> element specifies the web page's content. All of the content for the website will be written here. We utilised the script tag inside the body element to incorporate our javascript code. We've created an <ul> tag and listed the strings inside it. A <h1> tag has also been used.
- The classNames option is a string that indicates a class name or a list of comma-separated class names to match in the example above.
- On the dom element, calling JavaScript getElementsByClassName() methods.
- The preceding example shows how to use the getElementsByClassName() function to pick the< li> items that are descendants of the <ul> element using the getElementsByClassName() method.
- The </body> and </html> tags, respectively, are used to close the body and html tags.
Conclusion :-
The getElementsByClassName() returns a collection of all HTML elements with matching class names in an array.
To get all the items with the supplied class name, use the getElementsByClassName function. I hope this tutorial on how to get element by class in JavaScript helps you.
About Riya
