Фильтровать объекты по классуName from nodeList

Question

У меня есть нодлист объектов, возвращаемых вызовом document.getElementsByClassName('a'). Некоторые из этих объектов имеют дополнительный класс b. Как создать массив элементов, содержащих оба класса? Я не пользовался глобальным поиском для b. Я предпочитаю код vanillaJS/ES6.

пример HTML-код:

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

Answer 1

Try querySelector вместо этого.

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

Это, скорее всего, ваше самое простое решение.

Answer 2

В дополнении к решению с помощью Element.querySelectorAll(), document.getElementsByClassName() могут быть использованы для поиска элементов с первым именем класса, то filter() может быть использовано, чтобы держать только те элементы, которые имеют второй класс, используя Element.classList.contains() включать только элементы с оба классом имена. См. Демонстрацию ниже.

Обратите внимание, что она использует function.call, чтобы вызвать функцию фильтра, так как document.getElementsByClassName() возвращает NodeList, который имеет другой прототип, чем у Array.

var aElements = document.getElementsByClassName('a'); 
 
var abElements = Array.prototype.filter.call(aElements, function(element, index, aElements) { 
 
    return 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>

Обратите внимание, что Element.classList имеет ограниченную поддержку браузера (например, не в IE 9-), поэтому для того, чтобы проверить для класса б без использования этого имущества, можно разделить имена классов (используя свойство имя класса) в массив и использовать 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>