JavaScript getElementsByClassName
Summary: in this tutorial, you will learn how to use the getElementsByClassName()
method to select elements by class name.
Introduction to the getElementsByClassName() method
The getElementsByClassName()
method returns an array-like of objects of the child elements with a specified class name. The getElementsByClassName()
method is available on the document
element or any other elements.
When calling the method on the document
element, it searches the entire document and returns the child elements of the document:
let elements = document.getElementsByClassName(names);
Code language: JavaScript (javascript)
However, when calling the method on a specific element, it returns the descendants of that specific element with the given class name:
let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)
The method returns the elements
which is a live HTMLCollection of the matches elements.
The names parameter is a string that represents one or more class names to match; To use multiple class names, you separate them by space.
JavaScript getElementsByClassName() method examples
Let’s take some examples of using the getElementsByClassName()
method.
Suppose that you have the following HTML document:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript getElementsByClassName</title>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="secondary">Example 1</h2>
</article>
<article>
<h2 class="secondary">Example 2</h2>
</article>
</section>
</body>
</html>
Code language: HTML, XML (xml)
1) Calling JavaScript getElementsByClassName() on an element example
The following example illustrates how to use the getElementsByClassName()
method to select the <li>
items which are the descendants of the <ul>
element:
let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');let data = [].map.call(items, item => item.textContent);
console.log(data);
Code language: JavaScript (javascript)
Output:
['HTML', 'CSS', 'JavaScript', 'TypeScript']
Code language: JavaScript (javascript)
How it works:
- First, select the
<ul>
element with the class namemenu
using thegetElementById()
method. - Then, select
<li>
elements, which are the descendants of the<ul>
element, using thegetElementsByClassName()
method. - Finally, create an array of the text content of
<li>
elements by borrowing themap()
method of theArray
object.
2) Calling JavaScript getElementsByClassName() on the document example
To search for the element with the class heading-secondary
, you use the following code:
let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);console.log(data);
Code language: JavaScript (javascript)
Output:
["Example 1", "Example 2"]
Code language: JavaScript (javascript)
This example calls the getElementsByClassName()
method on the document
object. Therefore, it searches for the elements with the class secondary
in the entire document.
Summary
- Use the JavaScript
getElementsByClassName()
method to select the child elements of an element that has one or more give class names.