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:
Article No Longer Available
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')
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>
JavaScript
let p = document.getElementsByClassName('experiment');
console.log(p)
console.log(p[0].innerText)
output
HTMLCollection[]
Hey there
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>
JavaScript
let p = document.getElementsByClassName('experiment');
for (let x=0 ; x < p.length ; x++ ) {
p[x].style.color = 'dodgerblue';
}
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,
Top comments (16)
Good article, looking forward for more.. :)
What if there is only one element with that class name, would it still return an HTML Collection? Good article, btw ๐ฅ
Yes,
document.getElementsByClassName
would still return anHTMLcollection
if there is only one element with that class name.Take the following code snippet.
The console will log:
If you have just a single element with a unique class name, you should prefer
document.querySelector
overdocument.getElementsByClassName
.It's syntax will be:
The output in the console will be:
You can also attach an HTML ID to it and use
document.getElementByID
.@praveenreddy1798
@umamaheswari.v
Got it, thank you Habdul ๐
You are welcome.
@praveenreddy1798
@umamaheswari.v
That's a great answer in detail. thank you๐
You are welcome. I am glad I could help.
Thank you @Habdul ๐
I think it would still return an HTML Collection
Yeah, even I've the same doubt
Great Article, will we also get to know about querySelector in this series?
Yes, they're coming up๐
Great lesson Tharun
Thank you ๐
Do you plan on introducing
querySelector
andquerySelectorAll
for getting DOM elements? And maybe how to alias them to$
and$$
respectively?Hi Mohamed,
Yes, they are definitely included as a part of this series. ๐ Thank you for showing interest