How I target an Element By Class Name in JavaScript

#webdev #programming #javascript #beginners

This concept deals with the classes you create in HTML.

IF I want to target a specific class in JavaScript, I'll do something like this first in HTML:
<div class="next"></div>

That is my HTML class. And in JavaScript,

document.getElementsByClassName('next')[0]

You want the document, or DOM, to "get" the element by it's class name in HTML. But why did I add that 0 with the brackets like this [0]?

Each class is listed as an array, or group of items. So to choose the one I want, I simply choose the specific "index" in the array which is equal to the class I'm trying to target.

This is one way you can target an HTML class in JavaScript.

Top comments (7)

James Thomson • Jan 13 '22

But why did I add that 0 with the brackets like this [0]?

If you use querySelector you won't have to do this as it returns the first matched element. getElementByClassName is a good starting point for new developers, but once familiar with selecting elements I'd say querySelector (and it's companion querySelectorAll) is preferable as it allows for more advanced selectors such as a[href*='dev.to'].

Rico Brase • Jan 14 '22

Please note, that querySelectorAll and getElementsByClassName behave quite differently - querySelectorAll returns a static NodeList, getElementsByClassName returns a HTMLCollection.

From the MDN:

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed. For this reason it is a good idea to make a copy (eg. using Array.from) to iterate over if adding, moving, or removing nodes.

If you were aware of this and specifically require those live updates from the HTMLCollection, you can't use querySelectorAll.