如何使用 javascript 来计算屏幕上某个类的项目数？

Question

我在网上找到了一些示例，这些示例显示了如何计算某个类的元素

document.querySelectorAll('#main-div .specific-class').length;

但是我的问题是我的班级有空间。例如

class="toggle btn btn-default off"

我该如何计算这些？

Answer 1

document.querySelectorAll('#main-div .specific-class').length;这将查找并找到所有具有类特定类和下的 DOM 元素（不管它是否直接在下）具有 id main-div 的 DOM 元素。如果要查找具有特定多个类的所有元素并获取元素的长度，则应在 querySelectorAll 中删除类之间的空格。所以如果你有一个带有类的 HTML 标签class="toggle btn btn-default off"你应该做let elements = document.querySelectorAll('toggle.btn.btn-default.off').length;

Answer 2

您可以使用document.getElementsByClassName。const elements = document.getElementsByClassName('toggle btn btn-default off')elements是具有所有给定类名的所有子元素的类数组对象。然后您可以使用该属性length来计算元素的数量。const count = elements.length

Answer 3

   let cn = "toggle btn btn-default off";    //create div and set it's className "toggle btn btn-default off"    let e = document.createElement("div");    document.body.appendChild(e);    e.className = cn;    // count elements where class="toggle btn btn-default off"     console.log(document.getElementsByClassName(cn).length);//1

Answer 4

如果您有多个类，则可以连接这些类：document.querySelectorAll('#main-div.toggle.btn.btn-default.off').length;