如何使用 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;