Метод HTML DOM querySelectorAll()
❮ Элемент объектаПример
Установите цвет фона первого элемента с class="example" внутри элемента <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";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Метод querySelectorAll() возвращает коллекцию дочерних элементов элемента, которые соответствуют указанным селекторам CSS, в виде статического объекта NodeList.
Объект NodeList представляет собой набор узлов. Доступ к узлам можно получить по порядковым номерам. Индекс начинается с 0.
Совет: вы можете использовать свойство length объекта NodeList, чтобы определить количество дочерних узлов, соответствующих указанному селектору, затем вы можете пройтись по всем узлам и извлечь нужную информацию.
Для получения дополнительной информации о селекторах CSS посетите наш учебник по селекторам CSS и наш справочник по селекторам CSS .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Примечание. Internet Explorer 8 поддерживает селекторы CSS2. IE9 и более поздние версии также поддерживают CSS3.
Синтаксис
element.querySelectorAll(CSS selectors)
Значения параметров
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
Технические детали
| Версия ДОМ: | Объект документа уровня 1 селекторов |
|---|---|
| Возвращаемое значение: | Объект NodeList, представляющий все элементы-потомки текущего элемента, которые соответствуют указанным селекторам CSS. NodeList является статической коллекцией, что означает, что изменения в DOM НЕ влияют на коллекцию. Примечание. Выдает исключение SYNTAX_ERR, если указанные селекторы недействительны . |
Дополнительные примеры
Пример
Получите все элементы <p> внутри элемента <div> и установите цвет фона первого элемента <p> (индекс 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> с class="example" и установите фон первого элемента <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";
Пример
Узнайте, сколько элементов с class="example" содержится в элементе <div> (используя свойство length объекта 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;
Пример
Установите цвет фона всех элементов с помощью class="example" в элементе <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 : Справочник по селекторам CSS
Учебное пособие по JavaScript: список узлов JavaScript HTML DOM
Справочник по HTML DOM: элемент .querySelector()
Ссылка на HTML DOM: document.querySelectorAll()
❮ Элемент объекта