JavaScript метод Element.querySelectorAll()

Определение и применение

JavaScript метод querySelectorAll() объекта Element возвращает статический (не живой) объект NodeList, представляющий список элементов, соответствующих указанной группе селекторов, которые являются потомками элемента, на котором был вызван метод. Если совпадений не найдено, то возвращается пустой NodeList.

Объект NodeList представляет из себя набор узлов, к которым можно обращаться по номерам индексов, индекс коллекции начинается с 0. Вы можете использовать свойство length объекта NodeList для определения количества элементов, соответствующих указанному селектору и при необходимости перебирать все эти элементы в цикле.

Этот метод так же реализован как Document.querySelectorAll(), DocumentFragment.querySelectorAll() и ParentNode.querySelectorAll().

Если вам необходимы все элементы в документе, которые соответствуют указанному селектору или селекторам, то используйте для этого метод .querySelectorAll() объекта Document.

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

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

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Element.querySelectorAll

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
querySelectorAll	✓1	✓12	✓3.5	✓10	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const elementList = baseElement.querySelectorAll(selectors);

Спецификация

DOM Standard.

Значения параметров

Исключения

Пример использования

<button data-migration-click-0="">Click me</button>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

function myFunc() {
    const myDiv = document.body.querySelector('div'), // выбираем первый элемент <div> внутри элемента <body>
        liCollection = myDiv.querySelectorAll('li') // выбираем все элементы <li> внутри элемента <div>

    for (let i = 0; i < liCollection.length; i++) {
        // проходим циклом по всем элементам массивоподобного объекта
        liCollection[i].style.color = 'green' // устанавливаем зеленый цвет текста каждому элементу
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода querySelector() выбирает первый элемент <div> внутри элемента <body>, затем с помощью метода querySelectorAll() осуществляем поиск внутри выбранного элемента <div>, и находим внутри него все элементы <li>. После этого проходим циклом по всем элементам массивоподобного объекта и устанавливаем зеленый цвет текста каждому элементу.