JavaScript | Как получить все HTML-элементы с определённым классом?

JavaScript | Как получить все HTML-элементы с определённым классом?

Нам нужно получить из документа все HTML-элементы с определённым классом. Как это сделать?

Мы воспользуемся объектной моделью документа (стандарт DOM). В этом стандарте есть миксин ParentNode. В этом миксине есть функция querySelectorAll(), в которую нужно передавать CSS-селектор в виде строки. Нас интересуют элементы определённого класса, поэтому перед названием искомого класса мы будем подставлять символ точки «.»

Мы будем вызывать функцию на объекте документа — document. Функция querySelectorAll() — вернёт объект-прототип класса NodeList.

document.querySelectorAll(".ТВОЙ_КЛАСС")

 

Пример получения HTML-элементов с одинаковым классом

Откроем какую нибудь страницу интернет-магазина.

Определяем класс элементов для отбора - JavaScript
Определяем класс элементов для отбора — JavaScript

Вводим команду:

document.querySelectorAll(«.a0e0»)

В ответ нам возвращается объект-прототип класса NodeList.

NodeList из 29 элементов - JavaScript
NodeList из 29 элементов — JavaScript

Это массиво-подобный объект, который можно перевести в обычный массив JavaScript. Сделаем это — переведём методом from, конструктора Array!

Array.from(document.querySelectorAll(«.a0e0»))

Получаем массив из тех же самых элементов. Задача выполнена. Теперь можно производить остальные манипуляции с объектами на уровне методов массивов.

 

Информационные ссылки

DOM — https://dom.spec.whatwg.org