从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

尝试使用querySelector。

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

这可能是您最简单的解决方案。

Answer 2

如果您仍在使用document.getElementsByClassName()，则可以使用filter()方法仅保留具有第二类的元素，并使用Element.classList.contains()仅包含具有两个类名的元素。请参阅下面的演示。因为document.getElementsByClassName()返回一个NodeList的返回值，所以在调用该过滤器方法之前，需要将元素放入数组中。

ES-6版本

在调用filter方法之前，可以使用spread syntax将元素放入数组中。

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

请注意Element.classList限制了浏览器支持（例如，不在IE 9中），因此为了在不使用该属性的情况下检查 b 类，可以拆分类名（将属性 className ）用于数组并使用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>