HTML DOM querySelectorAll()Метод

Примеры

Получить все элементы с class="example" в документе:

var x = document.querySelectorAll(".example");

Определение и использование

Метод querySelectorAll() возвращает все элементы в документе, соответствующие указанным CSS-селекторам, и возвращаетNodeListNodeList объект.

Объект NodeList представляет собой коллекцию узлов. Доступ к нему можно получить по индексу, при этом значения индекса начинаются с 0.

Совет:Вы можете использовать length— свойство для получения атрибутов элементов, соответствующих селектору, а затем можно перебрать все элементы, чтобы получить нужную информацию.

Для получения дополнительной информации о CSS-селекторах обратитесь кУчебнику по CSS-селекторам ， Справочному руководству по CSS-селекторам。

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.

Метод
querySelectorAll()	4.0	8.0	3.5	3.2	10.0

Примечание:Internet Explorer 8 поддерживает селекторы CSS2. IE9 и более поздние браузеры поддерживают селекторы CSS3.

Синтаксис

elementList = document.querySelectorAll(selectors);

elementList — это статический объект NodeList.
selectors — это строка, содержащая один или несколько CSS-селекторов, разделённых запятыми.

Значения параметров

Параметр	Type	Описание
CSS-селектор	String	Обязательный. Указывает один или несколько элементов, соответствующих указанному CSS-селектору(ам). Элементы можно получить с помощью id, class, type, attribute, attribute value и т. д. в качестве селекторов. Несколько селекторов разделяются запятыми (,). Совет:Чтобы узнать больше о CSS-селекторах, обратитесь кСправочному руководству по CSS-селекторам。

Метод

Версия DOM:	Объект Document уровня 1
Возвращаемое значение:	Объект NodeList, представляющий все элементы в документе, соответствующие указанному CSS-селектору(ам). NodeList — это статический объект NodeList. Если указанный селектор недопустим, выбрасывается исключение SYNTAX_ERR.

Другие примеры

Пример

Получить все элементы <p> в документе и установить цвет фона для первого подходящего элемента <p> (индекс 0):

//Получить все элементы <p> в документе var x = document.querySelectorAll("p"); //Установить цвет фона первого элемента <p> x[0].style.backgroundColor = "red";

Попробуйте сами »

Пример

Получить все элементы <p> с class="example" в документе и установить цвет фона для первого подходящего элемента <p> (индекс 0):

//Получить все элементы <p> с class="example" в документе var x = document.querySelectorAll("p.example"); //Установить цвет фона первого элемента <p> с class="example" x[0].style.backgroundColor = "red";

Попробуйте сами »