How to get elements by class name on HTMLCollection [duplicate]

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:

1. Get elements by class name in HTMLCollection
2. Get elements by multiple class names

Answer 1

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.

Answer 2

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;
   }
   

2. Get elements by multiple class names :

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

Please use the second for better performance.