Как я могу использовать 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 с классом speci c -класса и ниже (не имеет значения, находится он непосредственно под или нет) элементом DOM с идентификатором main-div.

Если вы хотите найти все элементы с указанными c несколькими классами и получить длину элементов, вы должны удалить пробел между классами в 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

Вы можете объединить классы, если их несколько:

document.querySelectorAll('#main-div.toggle.btn.btn-default.off').length;

Answer 4

    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