DEV Community

Cover image for JavaScript DOM - Part 5 - Get Elements By ClassName [video + article]
Tharun Shiv
Tharun Shiv

Posted on • Updated on

JavaScript DOM - Part 5 - Get Elements By ClassName [video + article]

This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 5

You can read Part 4 here:

Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun

Several Elements with the same Class Name

The same class can be used by several elements. We can grab all of these elements having a particular class name. Example use cases may be like, grabbing all the buttons of the page having the same class name, grabbing all the images with the same class name, or any element for that matter.

Get elements by class name

When we use document.getElementsByClassName('class-name'), it grabs all the elements that have the same class name and returns us an HTML Collection that we can index or iterate to get the elements that we need in particular. A HTML Collection is similar to an Array that we're used to, so you can index it or get the length of it.

syntax:

document.getElementsByClassName('classname')
Enter fullscreen mode Exit fullscreen mode

example:
HTML

<p class="experiment">Hey there</p>
<p class="experiment">How's it going?</p>
<p class="experiment">Great!</p>
<p class="experiment">A set of elements with same class</p>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let p = document.getElementsByClassName('experiment');
console.log(p)

console.log(p[0].innerText)
Enter fullscreen mode Exit fullscreen mode

output

HTMLCollection[]

Hey there
Enter fullscreen mode Exit fullscreen mode

You can access to the individual elements by indexing and access their properties, change them, and do anything. But wait, that's not all of it.

Iterating through the HTML Collection

We can iterate through the HTML Collection, apply a particular operation on all of them. Below is an example of such iteration.

HTML

<p class="experiment">Hey there</p>
<p class="experiment">How's it going?</p>
<p class="experiment">Great!</p>
<p class="experiment">A set of elements with same class</p>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let p = document.getElementsByClassName('experiment');

for (let x=0 ; x < p.length ; x++ ) {
   p[x].style.color = 'dodgerblue';
}
Enter fullscreen mode Exit fullscreen mode

When this code is run, all the elements that have the class name as 'experiment' are changed to dodgerblue text color. In the for loop, the p.length gives the length of the HTML Collection, which is used by the for-loop.
So as the usual rule goes by, once you grab an element, you can do anything with it.

Note: it is getElementsByClassName , remember to add the 's' and be cautious about the capitalizations.

So this is all you need to know for now about getting Elements By Class Name

Next Part coming tomorrow, where we discuss about how you can get multiple elements by using getElementsByTagName.

Thank you for reading ๐Ÿ˜Š

Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun

Written by,

Written by,

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Tharun Shiv

Top comments (16)

Collapse
 
uma_bcc profile image
umamaheswari.v

Good article, looking forward for more.. :)

Collapse
 
venkat121998 profile image
venkat anirudh

What if there is only one element with that class name, would it still return an HTML Collection? Good article, btw ๐Ÿ”ฅ

Collapse
 
ziizium profile image
Habdul Hazeez • Edited

Yes, document.getElementsByClassName would still return an HTMLcollection if there is only one element with that class name.

Take the following code snippet.

<form class="myForm">
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email Address" />
    <input type="submit" value="Subscribe" />
</form>
let myForm = document.getElementsByClassName('myForm');
console.log(myForm);

The console will log:

HTMLCollection { 0: form.myForm, length: 1 }

If you have just a single element with a unique class name, you should prefer document.querySelector over document.getElementsByClassName.

It's syntax will be:

let myForm = document.querySelector('.myForm'); // note the "." before the class name
console.log(myForm);

The output in the console will be:

<form class="myForm">

You can also attach an HTML ID to it and use document.getElementByID.

@praveenreddy1798
@umamaheswari.v

Collapse
 
venkat121998 profile image
venkat anirudh

Got it, thank you Habdul ๐Ÿ˜Š

Thread Thread
 
ziizium profile image
Habdul Hazeez • Edited
Collapse
 
developertharun profile image
Tharun Shiv

That's a great answer in detail. thank you๐Ÿ™‚

Thread Thread
 
ziizium profile image
Habdul Hazeez

You are welcome. I am glad I could help.

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Thank you @Habdul ๐Ÿ˜Š

Collapse
 
uma_bcc profile image
umamaheswari.v

I think it would still return an HTML Collection

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Yeah, even I've the same doubt

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Great Article, will we also get to know about querySelector in this series?

Collapse
 
developertharun profile image
Tharun Shiv

Yes, they're coming up๐Ÿ˜Š

Collapse
 
fortranjohn profile image
Temitope A Ogunbiyi

Great lesson Tharun

Collapse
 
developertharun profile image
Tharun Shiv

Thank you ๐Ÿ™‚

Collapse
 
ducaale profile image
Mohamed Dahir

Do you plan on introducing querySelector and querySelectorAll for getting DOM elements? And maybe how to alias them to $ and $$ respectively?

Collapse
 
developertharun profile image
Tharun Shiv

Hi Mohamed,
Yes, they are definitely included as a part of this series. ๐Ÿ˜Š Thank you for showing interest