How to get elements by class name on HTMLCollection

Question

I've been thinking about why we cannot do this in javascript.

document.getElementsByClassName('class1').getElementsByClassName('class2')

This will not work, because the first getElementsByClassName call will give us an HTMLCollection, which doesn't have getElementsByClassName defined on it. Why is this? This would be a great function to use in this way, since it would let you get elements based on them having multiple different classes, not just one.

Is there any way to:

Get elements by class name in HTMLCollection
Get elements by multiple class names

That's a decent solution. However, I think the classes should be separated by a comma, right? — Sahand, Jan 03 '18 at 16:13
Problem is HTML Collection does not have methods so either you would need to loop over each one individually and filter them and build your own collection or use a better method `querySelectorAll` — epascarello, Jan 03 '18 at 16:13
if you want to make it a little more complicated for yourself: Array.from( document.getElementsByClassName('class1')).filter((item)=>{return Array.from(item.classList).includes('class2')}) — LShapz, Jan 03 '18 at 16:14
No, selector syntax for an element with two classes is to have them next to each other with no spaces. Comma would mean either "class1" or "class2", which is not the same as **both** "class1" and "class2". — Pointy, Jan 03 '18 at 16:14
You can use for multiple class name on one element like this: `document.getElementsByClassName('container _full')` (separated with one space) — golddragon007, Jan 03 '18 at 16:15

score 6 · Answer 1 · answered Jan 03 '18 at 16:16

Get by multiple class names:

document.querySelector('.someclass.otherclass'); // get first element that matches
document.querySelectorAll('.someclass.otherclass'); //get all elements that match

You can querySelector* any DOM element, not just document, in order to search in it.

Get by class name in HTMLCollection

[].filter.call(
    htmlCollection, element => [].includes.call(elements.classList, 'someclassname')
)

Neither HTMLCollection nor .classList are arrays, only array-like objects, hence the need for .call.

thanks, works perfect, just change ```elements.classList``` to ```element.classList``` — saida lachgar, Jun 22 '23 at 11:50

score 1 · Answer 2 · edited Dec 28 '20 at 12:32

1

Get elements by class name in HTMLCollection :

HTMLCollection.prototype.forEach = Array.prototype.forEach;

HTMLCollection.prototype.getElementsByClassName = function( name ){
    var all = [];
    this.forEach( function( el ){
         if( el )
             all.concat( el.getElementsByClassName( name ) );
    });
    return all;
}

Get elements by multiple class names :

document.querySelectorAll('.class1.class2');

Please use the second for better performance.

edited Dec 28 '20 at 12:32

mshwf

7,009
12
59
133

answered Jan 03 '18 at 16:16

karkael

431
2
9

First one is not correct, that is checking for children. – epascarello Jan 03 '18 at 16:18
Yep, sry but that the syntax. @Sandi expected to write `document.getElementsByClassName('class1').filterHasClassName('class2')` I think. – karkael Jan 03 '18 at 16:25

How to get elements by class name on HTMLCollection

2 Answers2