从 nodeList 按类名过滤对象

Question

我有一个通过调用 document.getElementsByClassName('a') 返回的对象的节点列表。其中一些对象有一个额外的 class b。如何创建包含两个 classes 的元素数组？我没有使用 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() 的文档指出它可以接受具有多个 class 名称的字符串（由 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

以及示例部分：

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

document.getElementsByClassName('red test')

该函数可用于两个 class 名称。对于名称为 class 的简单选择器，通常使用 querySelectorAll() 比使用 getElementsByClassName() 慢。请参阅 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>

如果您有来自 document.getElementsByClassName() 的现有集合，其中只有具有 class 名称 a 的元素，那么 filter() 方法可用于仅保留具有第二个 class 的元素，利用 Element.classList.contains() 仅包含具有两个 class 名称的元素。请参阅下面的演示。因为 document.getElementsByClassName() returns a returns a live NodeList 你需要将元素放入数组中才能调用该过滤器方法。

ES-6 版本

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

从 nodeList 按类名过滤对象

Filter objects by className from nodeList

javascript

nodelist

getelementsbyclassname

ES-6 版本

ES-5 版本