从节点列表中按className筛选对象

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>

- ClassicError

---

你的问题有点含糊不清。你是想要一个同时具有两个类别元素的结果，还是只想要一个仅包含两个类别元素的结果？ - user1106925

抱歉我没有说得太清楚。明显地，我想要包含类 'b' 的对象的类 'a' 节点列表索引。 - ClassicError

清楚吗？我还是有点困惑。能否展示一下应该得到的结果？ - user1106925

Answer 1

请使用 querySelector 代替。

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

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

- user2867288

---

是的，但这不允许我从类'a'列表中获取此元素的indexOf。 - ClassicError

@ClassicError：这与你的问题有什么关系？你实际上想做什么？ - user1106925

Answer 2

document.getElementsByClassName() 的文档指出它可以接受一个包含多个类名的字符串（用空格分隔）。

 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

同时拥有'red'和'test'类的所有元素获取方法：

获取所有同时拥有 'red' 和 'test' 类的元素：

document.getElementsByClassName('red test')

该函数可用于两个类名。通常，对于只涉及类名的简单选择器，使用 getElementsByClassName() 要比使用 querySelectorAll() 更快。请参见此 jsPerf中的比较。相关链接：JavaScript中的querySelector和querySelectorAll与getElementsByClassName和getElementById的比较

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() 方法返回的集合，其中只包含类名为 a 的元素，则可以使用 filter() 方法来保留仅具有第二个类的元素，利用 Element.classList.contains() 方法仅包含两个类名的元素。请参见下面的演示。因为 document.getElementsByClassName() 方法返回一个活动的 NodeList，所以在调用该过滤方法之前，您需要将元素放入数组中。

ES-6 版本

展开语法 可以用于在调用过滤方法之前将元素放入数组中。

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>

- Sᴀᴍ Onᴇᴌᴀ