Метод querySelectorAll() элемента DOM HTML

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

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

NodeList

NodeList является коллекцией узлов, подобной массиву (списку).

Узлы в списке можно получить через индекс (индекс). Начало индексации с 0.

Атрибут length возвращает количество узлов в списке.

См. также:

Референсная книга:

Атрибут classList

Атрибут className

Метод querySelector()

Метод getElementsByTagName()

Метод getElementsByClassName()

Объект Style HTML DOM

Учебник:

Грамматика CSS

Выборщик CSS

Референсный справочник выбора CSS

Пример

Пример 1

Установите цвет фона первого элемента с классом "example" в элементе <div>:

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

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

Совет:Более сложные примеры можно найти в нижней части страницы.

Грамматика

element.querySelectorAll(cssSelectors)

Параметры

Параметры Описание
cssSelectors

Обязателен. Строка. Определяет один или несколько CSS-селекторов для выбора элементов.

CSS-селекторы используются для выбора элементов HTML на основе id, класса, типа, атрибутов, значений атрибутов и т.д.

Для нескольких селекторов используйте запятую для разделения каждого селектора.

Совет:Полный список всех CSS-селекторов можно найти в нашей Референсный справочник выбора CSS.

Технические детали

Возвратное значение:

Объект NodeList представляет все потомки элементов, соответствующие заданному CSS-селектору.

NodeList является статическим набором, что означает, что изменения в DOM не влияют на набор.

Примечание:Если указанный селектор недействителен, выбрасывается исключение SYNTAX_ERR
Версия DOM: Документация по селекторам уровня 1 Document Object

Более сложные примеры

Пример 2

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

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

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

Пример 3

Получите все элементы <p> с классом "example" в <div> и установите фоновый цвет первого <p> элемента:

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

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

Пример 4

Найти, сколько элементов с классом "example" в элементе <div> (используя атрибут length объекта NodeList):

/* Получить элемент (div) с id="myDIV" и затем получить все элементы p с классом "example" в div, вернуть количество найденных элементов */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

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

Пример 5

Установить цвет фона для всех элементов с классом "example" в элементе <div>

// Получить элемент (div) с id="myDIV" и затем получить все элементы с классом "example" в div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Создать цикл for и установить цвет фона для всех элементов с классом "example" в div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

Пример 6

Установить цвет фона для всех элементов <p> в элементе <div>

// Получить элемент (div) с id="myDIV" и затем получить все элементы p в div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Создать цикл for и установить цвет фона для всех элементов p в div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

Пример 7

Установить стиль рамки для всех элементов <a> с атрибутом target в элементе <div>

// Получить элемент (div) с id="myDIV" и затем получить все элементы <a> с атрибутом "target" в div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Создать цикл for и установить рамку для всех элементов <a> с атрибутом target в div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

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

Пример 8

Установить цвет фона для всех элементов <h2>, <div> и <span> в <div>:

// Получить элемент с id="myDIV" (div) и все элементы <h2>, <div> и <span> внутри <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Создать цикл for и установить цвет фона для всех элементов <h2>, <div> и <span> в <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Примечание:Microsoft Internet Explorer 8 поддерживает выборщики CSS2. Версии IE9 и выше также поддерживают CSS3.

Связанные страницы

Учебник по CSS:Выборщик CSS

Референтное руководство по CSS:Референсный справочник выбора CSS

Учебник по JavaScript:JavaScript HTML DOM Node List

Референтное руководство по JavaScript:element.querySelector()

Референтное руководство по HTML DOM:document.querySelectorAll()