JavaScript метод ParentNode.querySelectorAll()

JavaScript ParentNode

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

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

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

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


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


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

Метод .querySelectorAll() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте Document, или ParentNode. Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
ParentNode.querySelectorAll()ДаДаДаДа8.0*Да

JavaScript синтаксис:

parentNode.querySelectorAll( selectors )

selectors - String

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

Selectors API Level 1

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

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

Исключения

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

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

const activeElements = document.querySelectorAll( ".first, .block" ) // находим все элементы из заданных селекторов в документе
                                                               .querySelectorAll( ".active" );          // находим все элементы с классом active внутри выбранных элементов

Более подробную практическую информацию Вы можете получить в описании метода .querySelectorAll() объекта Document.

JavaScript ParentNode
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

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