Документ HTML DOM querySelectorAll()
Пример
Выберите все элементы с class="example":
document.querySelectorAll(".example");
Ниже приведены дополнительные примеры.
Определение и использование
Метод querySelectorAll()возвращает все элементы, соответствующие селектору (селекторам) CSS.
Метод querySelectorAll()возвращает NodeList .
Метод querySelectorAll()выдает исключение SYNTAX_ERR, если селектор(ы) недействителен .
Учебники:
Учебное пособие по селекторам CSS
Учебник по списку узлов JavaScript
Методы селектора запросов:
Метод элемента querySelector()
Метод элемента querySelectorAll()
Метод Document querySelector()
Метод документа querySelectorAll()
Методы GetElement:
Метод документа getElementById()
HTML DOM NodeList/HTMLCollection
Различия между HTMLCollection и NodeList
NodeList и HTMLCollection — это похожие на массивы коллекции (списки) узлов (элементов), извлеченных из документа. Доступ к узлам можно получить по порядковым номерам. Индекс начинается с 0.
Оба объекта имеют свойство длины , которое возвращает количество элементов в списке.
HTMLCollection — это живая коллекция : если вы добавите элемент <li> в список в DOM, список в HTMLCollection также изменится.
NodeList — это статическая коллекция : если вы добавите элемент <li> в список в DOM, список в NodeList не изменится.
Методы getElementsByClassName()и getElementsByTagName()
возвращают HTMLCollection.
Методы querySelector()и querySelectorAll()
возвращают NodeList.
Синтаксис
document.querySelectorAll(CSS selectors)
Параметры
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Возвращаемое значение
| Тип | Описание |
| Объект | NodeList с элементами, которые соответствуют селекторам CSS. Если совпадений не найдено, nullвозвращается. |
Дополнительные примеры
Добавьте цвет фона к первому элементу <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>, <div> и <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Поддержка браузера
document.querySelectorAll() является функцией DOM уровня 3 (2004 г.).
Он полностью поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |