DEV Community

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

Tharun Shiv on May 21, 2020

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: ...

Read full post

umamaheswari.v • May 22 '20

Good article, looking forward for more.. :)

venkat anirudh • May 22 '20

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

Habdul Hazeez • May 22 '20 • 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

venkat anirudh • May 22 '20

Got it, thank you Habdul 😊

Habdul Hazeez • May 22 '20 • Edited

You are welcome.

@praveenreddy1798
@umamaheswari.v

praveenreddy1798 • May 22 '20

Thank you @Habdul 😊

Tharun Shiv • May 22 '20

That's a great answer in detail. thank you🙂

Jaya chandrika reddy • May 22 '20

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

Tharun Shiv • May 22 '20

Yes, they're coming up😊

Temitope A Ogunbiyi • May 22 '20

Great lesson Tharun

Tharun Shiv • May 22 '20

Thank you 🙂

Mohamed Dahir • May 22 '20

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

Tharun Shiv • May 22 '20

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