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

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