使用 ES6 检查 NodeList 中的任何元素是否具有特定类答案

【问题标题】：Check if any element in a NodeList has a specific class using ES6使用 ES6 检查 NodeList 中的任何元素是否具有特定类
【发布时间】：2020-10-15 08:27:23
【问题描述】：

我想检查 NodeList 中的任何元素是否具有特定的类。

例如，使用 jQuery，我只需执行以下操作：

//if any .item element has active class, return true
var isActive = $(".item").hasClass("active");

我只能使用 Javascript，但代码稍长：

var isActive = false;
var items = Array.from(document.getElementsByClassName("item"));

items.forEach(function(item, index) {
  if(item.className.indexOf('active') > 0) {
	isActive = true;
  }
});

alert(isActive);

<div class="item">1</div>
<div class="item">2</div>
<div class="item active">3</div>
<div class="item">4</div>

如何使用 ES6 做到这一点？选择器有帮助器吗？

谢谢！

【问题讨论】：

"选择器有助手吗？"不，没有。选择器是 Web API 的一部分，JS 不支持选择器。
ES6（现在是 ES2015）真的与 DOM 操作或 CSS 选择器没有任何关系；这些是浏览器环境功能。

标签： javascript jquery-selectors ecmascript-6

【解决方案1】：

Array.from(document.getElementsByClassName("item")).some(({classList}) =>
   classList.contains('active'))

可能是 ES6 能给你的最好的了，和你上面的代码基本一样。

【讨论】：

我觉得el => el.classList.…在这里比解构更惯用

【解决方案2】：

它与 ES2015 无关，但你可以像基本的 jQuery API 一样使用document.querySelector()：

 var isActive = document.querySelector(".item.active") != null;

【讨论】：

【解决方案3】：

在 vanilla JS 中你并不真的需要 ES6 来做同样的事情。

// jQuery
var isActive = $(".item").hasClass("active"); 

// Plain JavaScript
var isActive = document.querySelector('.item').classList.contains('active');

【讨论】：

【解决方案4】：

您可以在节点列表上.find() 并返回第一个真正的结果。

const activeEl = Array.prototype.find.call (items, item => item.classList.contains('active'));

【讨论】：