如何查找所有元素是否包含相同的类？

问题陈述：给定一个包含许多元素的 HTML 文档，我们必须找出所有被选中的元素是否包含相同的特定 CSS 类。这个问题可以在 JavaScript 的帮助下轻松解决。

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

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

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

HTML

  

    
    
  
    
        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;
        }
    
  
    
  
        // 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;
    

  

    
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        
    

  

输出：

如果将“active” CSS 类添加到所有按钮，将显示以下输出。