JavaScript метод Element.querySelectorAll()

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

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

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

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

Обращаю Ваше внимание на то, что не допускается использование CSS псевдоэлементов в качестве значения селектора для поиска элементов, в этом случае в качестве возвращаемого значения всегда будет значение null.

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`querySelectorAll()`	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

const elementList = baseElement.querySelectorAll(selectors);

selectors - String

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

Document Object Model (DOM)

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

Параметр	Описание
selectors	Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты ("\"). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Параметр

Описание

selectors

Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов.
Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты ("\"). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Исключения

Тип исключения	Описание
SYNTAX_ERR	Возникает в том случае, если синтаксис указанного селектора или селекторов некорректен.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .querySelectorAll() объекта Element</title>
	</head>
	<body>
		<button onclick = "myFunc()">Click me</button> <!-- добавляем атрибут событий onclick -->
		<div>
		        <ul>
		                <li>1</li>
		                <li>2</li>
		                <li>3</li>
		        </ul>
		</div>
		<script>
	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"; // устанавливаем зеленый цвет текста каждому элементу
	  }		
	}
		</script>
	</body>
</html>

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

Результат нашего примера:

Пример использования JavaScript метода .querySelectorAll() объекта Element

JavaScript Element