Summary: in this tutorial, you will learn how to use the

getElementsByClassName() method to select elements by class name.

Introduction to the getElementsByClassName()

method
Every HTML element has an optional class attribute like this:
<button class="btn btn-primary">Save</button>

The value of the class attribute is a space-separated

C list of the classes of the
o
element.
d
The classes are case-sensitive.
e
The classes allows you to use the CSS to match elements. For example:
l
.btn {
a
n background-color: red;
}
g
u
aIn JavaScript, you use the getElementsByClassName()
C method to select
og
elements
de
based on their classes.
e:
The getElementsByClassName() method is available on the document object
and
lH any HTML element.
C
aT
The getElementsByClassName()
onM method accepts a single argument which is a
dgL
string that contains one or more class names:
eu,
alet elements = document.getElementsByClassName(classNames)
lgX
let
aeM
elements = parentElement.getElementsByClassName(classNames)
n:L
gIn this syntax, the classNames parameter is a string that represents a class
uC
(name to match. For example:
aS
x
gS
let btn = document.getElementsByClassName('btn');
m
el
:()
If you match elements by multiple classes, you need to use whitespace to
c
Jseparate
s them like this:
as
let
v) btn = document.getElementsByClassName('btn bt-primary');
a
S
c
Note that you cannot use class selectors e.g., .btn or .btn-primary for the
r
getElementsByClassName()
i method.
p
tThe getElementsByClassName() method returns a live HTMLCollection of

elements,
( which is an array-like object.
j
If
a you call the getElementsByClassName() method on the document object, the
vmethod searches for elements with the specified class names in the whole
adocument.
s
c
r
i
p
t
)
However, when you call the getElementsByClassName() method on a specific
element, it returns only matching elements in the subtree of that element.

JavaScript getElementsByClassName() examples

Let’s take some examples of using the getElementsByClassName() method.
Suppose that you have the following HTML:
<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">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="heading-secondary">Example 1</h2>
C </article>
o
<article>
d
e
<h2 class="heading-secondary">Example 2</h2>
</article>
l </section>
a</div>
n
gC
uo1) Calling JavaScript getElementsByClassName() on an element
ad
example
ge
eThe following example illustrates how to use the getElementsByClassName()
:l
method
a to select the <li> items which are the descendants of the <ul>
element:
Jn
ag
vulet menu = document.getElementById('#menu');
alet items = menu.getElementsByClassName('item');
g
S
celet data = [].map.call(items, item => item.textContent);
r:
i
console.log(data);
pH
tT
Output:
M
(L
["HTML",
j, "CSS", "JavaScript", "TypeScript"]
a
How it works:
vX
aM
sL
c
r(
ix
pm
tl
)
 •First, select the <ul> element with the class name menu using the
getElementById() method.
•Then, select <li> elements, which are the descendants of the <ul>
element, using the getElementsByClassName() method.
•Finally, create an array of the text content of <li> elements by borrowing
the map() method of the Array 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('heading-
secondary');

let data = [].map.call(elements, elem => elem.textContent);

console.log(data);

Output:
C
o
d["Example 1", "Example 2"]
e

This
C
lo
example calls the getElementsByClassName() method on the document
object,
ad therefore, it searches for the elements with the class heading-secondary
nin
e the entire document.
g
uIn
l this tutorial, you learned how to use the getElementsByClassName() method
aa
to
gn
select elements by one or more class names.
eg
:u
a
Jg
ae
v:
a
S
J
ca
rv
ia
pS
tc
r
(i
jp
at
v
a(
sj
ca
rv
ia
ps
tc
)r
i
p
t
)