English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
querySelectorAll()Возвратный список элементов в документе, соответствующих заданному набору селекторов (используется глубинный предпочтительный порядок遍ения узлов документа). Возвратный объект - NodeList.
Элементы в возвратном NodeList отсортированы по порядку их появления в исходном коде.
Возвратный NodeList можно доступить через индекс. Индекс начинается с 0.
NodeList является статическим набором, что означает, что изменения в DOM не влияют на этот набор.
Используйте атрибут length NodeList, чтобы определить количество элементов с указанным селектором, затем можно пройтись по всем элементам и извлечь необходимую информацию.
document.querySelectorAll(selectors)
document.querySelectorAll("div");Тестирование‹/›Числа в таблице указывают на первую версию браузера, которая поддерживает метод querySelectorAll():
| Методы | |||||
| querySelectorAll() | 1 | 3.5 | 10 | 3.2 | 8 |
| Параметр | Описание |
|---|---|
| selectors | Строка, содержащая один или несколько селекторов для совпадения. Эта строка должна бытьCSS selectorСтрока. |
| Возвратное значение: | Объект NodeList, представляющий документы, соответствующиеCSS selectorВсе элементы, соответствующие шаблону. |
|---|---|
| Исключительные случаи: | SyntaxError-Синтаксис строки指定的 селектора недействителен |
| Версия DOM: | Уровень DOM 1 |
Получить все элементы с классом "demo":
document.querySelectorAll(".demo");Тестирование‹/›Этот пример возвращает список всех элементов <div> в документе, имеющих класс "note":
document.querySelectorAll("div.note");Тестирование‹/›Установить цвет фона всех элементов <h1>, <p> и <div> в документе:
document.querySelectorAll("h1, p, div");Тестирование‹/›CSS tutorial:CSS selector
CSS Reference:CSS#idВыборщик
CSS Reference: CSS .class Выборщик
DOM Document querySelector() Методы
DOM Document getElementsByClassName() Методы
DOM Document getElementsByTagName() Методы