Метод querySelectorAll()
Пример element.querySelectorAll()
Установите цвет фона первого элемента (в "myDiv") с помощью class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
Попробуйте сами »
Ещё примеры ниже.
Описание querySelectorAll()
Метод querySelectorAll() возвращает все дочерние элементы, соответствующие селектору(ам) CSS.
Метод querySelectorAll() возвращает NodeList.
Метод querySelectorAll() выдает исключение SYNTAX_ERR, если селектор(ы) недействительны
Учебники:
JavaScript Учебник по списку узлов
QuerySelector Методы:
Метод Element querySelectorAll()
Метод Document querySelector()
Метод Document querySelectorAll()
GetElement Методы:
Метод Document getElementById()
NodeList
NodeList — это массивоподобная коллекция (список) узлов.
Доступ к узлам в списке осуществляется по индексу. Индекс начинается с 0.
Свойство length возвращает количество узлов в списке.
Синтаксис querySelectorAll()
element.querySelectorAll(CSS селекторы)
Параметры querySelectorAll()
| Параметр | Описание |
|---|---|
| CSS селекторы | Обязательно. Один или несколько селекторов CSS. Селекторы CSS выбирают элементы HTML на основе идентификатора, классов, типов, атрибутов, значений атрибутов и т.д. Полный список см. в нашем CSS Справочнике селекторов. Для нескольких селекторов разделяйте каждый селектор запятой (см. "Дополнительные примеры"). |
Возвращаемое значение querySelectorAll()
| Тип | Описание |
|---|---|
| NodeList | Коллекция элементов-потомков, которая соответствует селектору(ам) CSS. NodeList является статическим (изменения в DOM НЕ оказывают влияния на коллекцию). Выдает исключение SYNTAX_ERR, если указанный селектор(ы) недействителен. |
Ещё примеры querySelectorAll()
Установите цвет фона первого элемента <p> в "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
Попробуйте сами »
Установите фон первого элемента <p> в "myDIV" с помощью class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
Попробуйте сами »
Сколько элементов с class="example" находится в "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
Попробуйте сами »
Установите фон всех элементов с class="example" в "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Попробуйте сами »
Установите цвет фона для всех элементов <p> в "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Попробуйте сами »
Установите стиль границы всех элементов <a> в "myDIV", имеющих атрибут "target":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
Попробуйте сами »
Установите цвет фона для всех элементов <h3> и <span> в документе:
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Попробуйте сами »
Поддержка querySelectorAll()
element.querySelectorAll() является функцией DOM уровня 3 (2004).
Он полностью поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |