Метод querySelectorAll()
Пример
Установить цвет фона первого элемента с class="example" внутри элемента <div>:
// Получите элемент с id="media" (div), затем получите все элементы внутри div с class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Установите цвет фона первого элемента с помощью class="example" (index 0) в div
x[0].style.backgroundColor = "red";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод 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.
Синтаксис
element.querySelectorAll(CSS selectors)
Параметр значений
Параметр | Тип | Описание |
---|---|---|
CSS селекторы | String | Требуется. Указывает один или несколько селекторов CSS для соответствия элементу. Они используются для выбора HTML-элементов на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и т.д. Для множества селекторов разделяйте каждый селектор запятой. Совет: Список всех селекторов CSS смотрите Справочник CSS Селекторы. |
Технические детали
DOM Версия: | Уровень селекторов 1 Объект документа |
---|---|
Вернёт значение | Объект NodeList, представляющий все элементы-потомки текущего элемента, который соответствует указанному CSS-селектору(ам). Список узлов - это статическая коллекция, что означает, что изменения в DOM не влияют на коллекцию. Примечание: Выдает исключение SYNTAX_ERR, если указанный селектор(ы) недействителен |
Ещё примеры
Пример
Получить все элементы <p> внутри элемента <div> и установить цвет фона первого элемента <p> (индекс 0):
// Получите элемент с помощью id="myDIV" (в div), затем получите все p элементов внутри div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Установите цвет фона первого элемента <p> (индекс 0) в div
x[0].style.backgroundColor = "red";
Попробуйте сами »
Пример
Получить все элементы <p> в <div> с class="example" и установить фон для первого <p> элемента:
// Получите элемент с id="media" (div), затем получите все p элементов с class="example" внутри div
var x = document.getElementById("myDIV").querySelectorAll("p.example");
// Установите цвет фона первого элемента <p> с class="example" (индекс 0) в div
x[0].style.backgroundColor = "red";
Попробуйте сами »
Пример
Узнать, сколько элементов с class="example" содержится в элементе <div> (используя свойство length объекта NodeList):
/* Получите элемент с id="media" (div), затем получите все p элементов с class="example" внутри div и верните количество найденных элементов */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;
Попробуйте сами »
Пример
Установить цвет фона всех элементов с class="example" в элементе "div":
// Получите элемент с id="myDIV" (в div), затем получите все элементы с class="example" внутри div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Создайте цикл for и установите цвет фона для всех элементов с class="example" в div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Пример
Установите цвет фона всех элементов <p> в элементе <div>:
// Получите элемент с id="media" (в div), затем получите все 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";
}
Попробуйте сами »
Пример
Установить стиль границы всех элементов <a> в элементе <div>, которые имеют атрибут "target":
// Получите элемент с id="media" (div), затем получите все элементы "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";
}
Попробуйте сами »
Пример
Установить цвет фона всех элементов <h2>, <div> и <span> в элементе <div>:
// Получите элемент с id="media" (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";
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Селекторы
CSS Справочник: CSS Селекторы Справочник
JavaScript Учебник: JavaScript HTML DOM Список Узла
HTML DOM Справочник: element.querySelector()
HTML DOM Справочник: document.querySelectorAll()