пример
Получить все элементы в документе с классом = «пример»:
var x =
document.querySelectorAll(".example"); Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
querySelectorAll() метод возвращает все элементы в документе , который соответствует заданному CSS selector(s) , в качестве статического объекта NodeList.
Объект NodeList представляет коллекцию узлов. Узлы могут быть доступны с помощью индексов. Индекс начинается с 0.
Совет: Вы можете использовать длину свойство объекта NodeList , чтобы определить количество элементов, совпадает с указанным селектором, то вы можете перебрать все элементы и извлекать информацию , которую Вы хотите.
Для получения более подробной информации о CSS селекторов, посетите наш CSS селекторы Учебник и наш CSS селекторы Reference .
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4,0 | 9,0 | 3,5 | 3,2 | 10,0 |
Примечание: Internet Explorer 8 поддерживает CSS2 селекторы. IE9 и более поздние версии имеют поддержку CSS3, а также.
Синтаксис
document.querySelectorAll( CSS selectors )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| CSS selectors | String | Необходимые. Задает один или несколько CSS селекторы, чтобы соответствовать элементу. Они используются для выбора HTML-элементов на основе их идентификаторов, классов, типов, атрибутов, значения атрибутов и т.д. Для нескольких селекторов, каждый селектор отделить запятой. Совет: Для получения списка всех CSS селекторов, смотрите на нашем CSS селекторы Reference . |
Технические подробности
| DOM Версия: | Уровень Селекторы Объект 1 Документ |
|---|---|
| Возвращаемое значение: | Нодлист объект, представляющий все элементы в документе , который соответствует указанному CSS selector(s) . NodeList представляет собой статический сбор, а это означает, что изменения в DOM не имеют никакого эффекта в коллекции. Выдает исключение SYNTAX_ERR если selector(s) недействителен |
Еще примеры
пример
Получить все <p> элементы в документе, и установить цвет фона первого <p> элемента (index 0) :
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; Попробуй сам " пример
Получить все <p> элементы в документе с классом = «пример», и установить фон первого <p> элемента:
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; Попробуй сам " пример
Узнайте, как много элементов с классом = «например» есть в документе (используя свойство длины объекта NodeList):
var x =
document.querySelectorAll(".example").length; Попробуй сам " пример
Установите цвет фона всех элементов в документе с классом = «пример»:
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 Reference: CSS Селекторы Ссылка
JavaScript Учебник: Список JavaScript HTML DOM Node
HTML DOM Ссылка: документ. querySelector()
HTML DOM Reference: элемент. querySelectorAll()