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