Метод querySelectorAll() документа DOM HTML

  • Предыдущая страница
  • Следующая страница
  • Вернуться на один уровень вверх Документы DOM HTML

Определение и использование

querySelectorAll() Метод возвращает все элементы, соответствующие CSS-селектору.

querySelectorAll() Метод возвращает NodeList.

Если селектор недействителен, то querySelectorAll() Метод может выбросить SYNTAX_ERR Исключение.

Пример

Пример 1

Выбрать все элементы с классом "example":

document.querySelectorAll(".example");

попробуйте сами

Пример 2

Добавить цвет фона для первого элемента <p>:

const nodeList = document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

попробуйте сами

Пример 3

Добавить цвет фона для первого элемента <p> с классом "example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

попробуйте сами

Пример 4

Количество элементов с классом "example":

let numb = document.querySelectorAll(".example").length;

попробуйте сами

Пример 5

Установить цвет фона для всех элементов с классом "example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

попробуйте сами

пример 6

установить цвет фона для всех элементов <p>.

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

попробуйте сами

пример 7

установить рамку для всех элементов <a>, использующих атрибут "target".

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

попробуйте сами

пример 8

установить цвет фона для каждого элемента <p>, который является потомком элемента <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

попробуйте сами

пример 9

установить цвет фона для всех элементов <h3>, <div> и <span>.

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

попробуйте сами

синтаксис

document.querySelectorAll(CSSselectors)

параметр

параметр описание
CSSselectors

Обязателен. Один или несколько CSS-селекторов.

CSS-селекторы выбирают HTML-элементы по id, классу, типу, свойству, значению свойства и т.д.

Для полного списка, пожалуйста, посетите наш Референсное руководство по селекторам CSS.

Для нескольких селекторов, пожалуйста, разделите каждый селектор запятой (см. пример上方).

возвратное значение

тип описание
объект

объект NodeList, содержащий элементы, соответствующие CSS-селектору.

Если не найден соответствующий элемент, возвращается пустой объект NodeList.

Разница между HTMLCollection и NodeList

NodeList и HTMLcollection очень похожи.

оба представляют собой наборы аналогичных массивам узлов (элементов), извлеченных из документа. Узлы можно получить по индексу (индексу). Индекс начинается с 0.

оба length пroperty, которая возвращает количество элементов в списке (коллекции).

HTMLCollection являетсяэлементом документасборник.

NodeList являетсяузел документасборник (узел элемента, узел свойства и узел текста).

Элементы HTMLCollection можно доступа через их имя, id или индекс.

Элементы NodeList можно доступа только через их индекс.

HTMLCollection всегда являетсятекущийсборник.

Например: если добавить элемент <li> в список DOM, то список в HTMLCollection также изменится.

NodeList обычно являетсяСтатическийсборник.

Например: если добавить элемент <li> в список DOM, то список в NodeList не изменится.

getElementsByClassName() и getElementsByTagName() Методы возвращают текущий HTMLCollection.

querySelectorAll() Методы возвращают статический NodeList.

childNodes Свойства возвращают текущий NodeList.

Поддержка браузерами

document.querySelectorAll() Это функция DOM Level 3 (2004).

Поддерживается всеми браузерами:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

См. также

Урок:

Селекторы CSS

Референсное руководство по селекторам CSS

Уроки NodeList JavaScript

Метод QuerySelector:

Метод querySelector() элемента

Метод querySelectorAll() элемента

Метод querySelector() документа

Метод querySelectorAll() документа

Метод GetElement:

Метод getElementById() документа

Метод getElementsByTagName() документа

Метод getElementsByClassName() документа

  • Предыдущая страница
  • Следующая страница
  • Вернуться на один уровень вверх Документы DOM HTML