JavaScript 如何查找所有元素是否具有相同的类

问题描述： 给定一个具有许多元素的HTML文档，我们需要找出是否所有选定的元素都包含相同的CSS类。这个问题可以通过JavaScript轻松解决。

方法： 对于这个问题，我们将使用JavaScript中的数组对象的 Array.prototype.every() 方法。该方法仅在数组的所有元素（方法调用对象）满足给定条件时返回 true 。

首先，我们需要使用JavaScript的 document.querySelectorAll() 方法选择所有需要检查其是否具有相同CSS类的HTML文档元素。
由于 querySelectorAll() 方法返回所选元素的节点列表，因此我们需要使用 Array.prototype.from() 方法将此节点列表转换为数组，以便我们可以在其上调用 every() 方法。
最后，我们将在返回的所选元素数组上使用 every() 方法，只有当数组的所有元素都具有指定的类时，才会返回 true 。

示例： 在下面的示例中，HTML文档中有六个按钮元素，其中只有五个元素有添加了“active”CSS类。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title> 
      To find whether all element contains same class or not 
    </title> 
</head> 
  
<body> 
    <div id="container"> 
        <button class="active">GeeksforGeeks</button> 
        <button class="active">GeeksforGeeks</button> 
        <button class="active">GeeksforGeeks</button> 
        <button>GeeksforGeeks</button> 
        <button class="active">GeeksforGeeks</button> 
        <button class="active">GeeksforGeeks</button> 
        <h1></h1> 
    </div> 
</body> 
</html>

CSS代码

button { 
    background-color: black; 
    color: white; 
    padding: 10px 24px; 
    width: 300px; 
    font-size: 18px; 
    border: none; 
    font-weight: bold; 
    transition: all 0.4s; 
    margin: 24px 80px; 
} 
  
#container { 
    display: flex; 
    flex-direction: column; 
} 
  
h1 { 
    margin: 24px 80px; 
} 
  
.active { 
    background-color: green; 
}

Javascript代码

<script> 
    // Select the required elements 
    let buttons = document.querySelectorAll("button"); 
    let text = document.querySelector("h1"); 
      
    // Convert the returned node list into an array 
    buttons = Array.from(buttons); 
      
    // Check if all the selected elements have 
    // the class using every() method 
    let check = buttons.every((btn)  
        => btn.classList.contains("active")); 
    text.textContent = check; 
</script>

输出：

JavaScript 如何查找所有元素是否具有相同的类