Метод querySelectorAll()
Пример
Получить все элементы в документе с помощью class="example":
var x =
document.querySelectorAll(".example");
Попробуйте сами »
Ещё примеры "Попробуйте сами" ниже.
Определение и использование
Метод querySelectorAll() возвращает все элементы в документе, соответствующие указанным CSS-селекторам, в виде статического объекта NodeList.
Объект NodeList представляет собой набор узлов. Доступ к узлам можно получить по индексным номерам. Индекс начинается с 0.
Совет: Вы можете использовать свойство length объекта NodeList для определения количества элементов, которое соответствует указанному селектору, затем вы можете перебирать все элементы и извлекать нужную информацию.
Для получения дополнительной информации о CSS-селекторах посетите Учебник CSS Селекторы и Справочник CSS Селекторы.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Примечание: Internet Explorer 8 поддерживает селекторы CSS2. IE9 и более поздние версии также поддерживают CSS3.
Синтаксис
document.querySelectorAll(CSS Селекторы)
Значения параметров
| Параметр | Тип | Описание |
|---|---|---|
| CSS Селекторы | String | Требуемый. Задает один или несколько CSS селекторов для соответствия элементу. Они используются для выбора HTML элементы на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и т.д. Для нескольких CSS селекторов разделяйте каждый селектор запятой. Совет: Для получения списка всех CSS селекторов, посмотрите Справочник CSS Селекторы. |
Технические детали
| DOM Версия: | CSS Селекторы уровень 1 Объект документа |
|---|---|
| Возвращает значение: | Объект NodeList, представляющий все элементы в документе, которые соответствуют указанным CSS-селекторам. Список узлов - это статическая коллекция, что означает, что изменения в DOM не влияют на коллекцию. Выдает исключение SYNTAX_ERROR, если селектор(ы) недействителен |
Ещё примеры
Пример
Получить все элементы <p> в документе и установите цвет фона первого элемента <p> (индекс 0):
// Получите все <p> элементы в документе
var x = document.querySelectorAll("p");
// Установите цвет фона первого элемента <p>
x[0].style.backgroundColor = "red";
Попробуйте сами »
Пример
Получить все элементы <p> в документе с class="example" и установите фон для первого элемента <p>:
// Получите все <p> элементы в документе с class="example"
var x =
document.querySelectorAll("p.example");
// Установите цвет фона первого элемента <p> с помощью class="example" (index 0)
x[0].style.backgroundColor = "red";
Попробуйте сами »
Пример
Узнайть, сколько элементов с class="example" есть в документе (используя свойство length объекта NodeList):
var x =
document.querySelectorAll(".example").length;
Попробуйте сами »
Пример
Установить цвет фона всех элементов в документе с помощью class="example":
var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Пример
Установить цвет фона для всех элементов <p> в документе:
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Пример
Установить границу всех элементов <a> в документе, которые имеют атрибут "target":
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
Попробуйте сами »
Пример
Установить цвет фона каждого элемента <p>, родительским элементом которого является <div> элемент:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Пример
Установить цвет фона для всех элементов <h2>, <div> и <span> в документе:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Селекторы
CSS Справочник: Справочник CSS Селекторы
JavaScript Учебник: JavaScript HTML DOM Список узлов
HTML DOM Справочник: document.querySelector()
HTML DOM Справочник: element.querySelectorAll()
