Filter objects by className from nodeList

Question

I've got a nodelist of objects returned by a call to document.getElementsByClassName('a'). Some of these objects have an extra class b. How can I create an array of elements that contain both classes? I don't was use a global search for b. I prefer vanillaJS/ES6 code.

HTML code example:

<div class ="a"></div>
<div class ="a"></div>
<div class ="a b"></div>
<div class ="a"></div>
<div class ="a b"></div>
<div class ="a"></div>

Vassaux

Your question is a little ambiguous. Do you want a result that has elements of both classes, or do you want a result that only has elements with both classes. – Roosevelt

Sorry that I wasn't specific. Clearly I want class 'a' nodelist index of objects containing 'b' class. – Vassaux

Clearly? I'm still confused. How about showing what the result should be? – Roosevelt

Answer 1

Try querySelector instead.

document.querySelectorAll('.a.b');

This is likely your simplest solution.

Caecilian

Yes, but this doesn't allow me to take indexOf this element from class 'a' list – Vassaux

@ClassicError: What does that have to do with your question? What are you actually trying to do? – Roosevelt

Answer 2

The documentation for document.getElementsByClassName() states it can accept a string with multiple class names (separated by a space):

 var elements = document.getElementsByClassName(names); // or:
 var elements = rootElement.getElementsByClassName(names);

• elements is a live HTMLCollection of found elements.
• names is a string representing the list of class names to match; class names are separated by whitespace

and also in the Examples section:

Get all elements that have both the 'red' and 'test' classes:

document.getElementsByClassName('red test')

That function can be used for both class names. Generally using querySelectorAll() can be slower than using getElementsByClassName() for a simple selector with class names. See comparison in this jsPerf . Related: querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript

const abElements = document.getElementsByClassName('a b');
console.log(abElements);

<div class="a"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>

---

If you have an existing collection from document.getElementsByClassName() with only the elements that have class name a then the filter() method can be used to keep only the elements that have the second class, utilizing Element.classList.contains() to only include elements with both class names. See a demonstration below. Because document.getElementsByClassName() returns a returns a live NodeList you will need to put the elements into an array before you can call that filter method.

ES-6 Version

The spread syntax can be used to put the elements into an array before calling the filter method.

const aElements = document.getElementsByClassName('a');
const abElements = [...aElements].filter(element => element.classList.contains('b'));
console.log(abElements);

<div class="a"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>

ES-5 Version

Note that Element.classList has limited browser support (e.g. not in IE 9-) so in order to check for the b class without using that property, you could split the class names (using property className) into an array and use Array.indexOf():

var aElements = document.getElementsByClassName('a');
var abElements = Array.prototype.filter.call(aElements, function(element, index, aElements) {
  var classNames = element.className.split(' ');
  return classNames.indexOf('b') > -1;
});
console.log(abElements);

<div class="a"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>
<div class="a b"></div>
<div class="a"></div>

Eudo