пример
Установите цвет фона первого элемента с классом = «например» внутри <div> элемент:
// Get the element with id="myDIV" (a div), then get all elements inside div
with class="example"
var x =
document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index
0) in div
x[0].style.backgroundColor = "red"; Попробуй сам " Больше "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, а также.
Синтаксис
element .querySelectorAll( CSS selectors )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| CSS selectors | String | Необходимые. Задает один или несколько CSS селекторы, чтобы соответствовать элементу. Они используются для выбора HTML-элементов на основе их идентификаторов, классов, типов, атрибутов, значения атрибутов и т.д. Для нескольких селекторов, каждый селектор отделить запятой. Совет: Для получения списка всех CSS селекторов, смотрите на нашем CSS селекторы Reference . |
Технические подробности
| DOM Версия: | Уровень Селекторы Объект 1 Документ |
|---|---|
| Возвращаемое значение: | Нодлист объект, представляющий все дочерние элементы текущего элемента , который соответствует заданному CSS selector(s) . NodeList представляет собой статический сбор, а это означает, что изменения в DOM не имеют никакого эффекта в коллекции. Примечание: Выдает исключение SYNTAX_ERR , если указанный selector(s) недействителен |
Еще примеры
пример
Получить все <p> элементы внутри <div> элемент, и установить цвет фона первого <p> элемента (index 0) :
// Get the element with id="myDIV" (a div), then get all p elements inside
div
var x =
document.getElementById("myDIV").querySelectorAll("p");
// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red"; Попробуй сам " пример
Получить все <p> элементов в <div> с классом = «пример», и установить фон первого <p> элемента:
// Get the element with id="myDIV" (a div), then get all p elements with
class="example" inside div
var x =
document.getElementById("myDIV").querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example"
(index 0) in div
x[0].style.backgroundColor = "red"; Попробуй сам " пример
Узнайте, как много элементов с классом = «например» есть в <div> элемент (используя свойство длины объекта NodeList):
/* Get the element with id="myDIV" (a div), then get all p
elements with class="example" inside div, and return the number of elements
found */
var x =
document.getElementById("myDIV").querySelectorAll(".example").length; Попробуй сам " пример
Установите цвет фона всех элементов с классом = «пример» в <div> элемент:
// Get the element with id="myDIV" (a div), then get all elements
with class="example" inside div
var x =
document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with
class="example" in div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.backgroundColor = "red";
} Попробуй сам " пример
Установите цвет фона всех <p> элементов в <div> элемент:
// Get the element with id="myDIV" (a div), then get all p elements inside
div
var x =
document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements in
div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.backgroundColor = "red";
} Попробуй сам " пример
Установите стиль границы всех <a> элементов в <div> элемент , которые имеют "target" атрибут:
// Get the element with id="myDIV" (a div), then get all <a> elements with a
"target" attribute inside div
var x =
document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with a
target attribute in div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.border = "10px solid red";
} Попробуй сам " пример
Установите цвет фона всех <h2>, <div> и <span> элементы в <div> элемент:
// Get the element with id="myDIV" (a div), then get all <h2>,
<div> and <span> elements inside <div>
var x =
document.getElementById("myDIV").querySelectorAll("h2,
div, span");
// Create a for loop and set the background color of all <h2>, <div> and
<span> elements in
<div>
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 Reference: элемент. querySelector()
HTML DOM Ссылка: документ. querySelectorAll()