Поиск элементов DOM с помощью селекторов

API селекторов предоставляет методы, которые позволяют быстро и легко извлекать Element узлы из DOM, сопоставляя их с набором селекторов. Это значительно быстрее, чем предыдущие методы, которые, например, требовали использования цикла в JavaScript-коде для поиска необходимых элементов.

Этот стандарт добавляет два новых метода к объектам, реализующим интерфейсы Document, DocumentFragment или Element:

querySelector()

Возвращает первый соответствующий Element узел в поддереве узла. Если соответствующий узел не найден, возвращается null.

querySelectorAll()

Возвращает NodeList, содержащий все соответствующие Element узлы в поддереве узла, или пустой NodeList, если совпадений не найдено.

Примеры и подробности вы можете найти в документации методов Element.querySelector() и Element.querySelectorAll().

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

Для защиты конфиденциальности пользователя некоторые псевдоклассы не поддерживаются или ведут себя иначе. Например, :visited не вернёт совпадений, а :link обрабатывается как :any-link.

Можно выбирать только элементы, поэтому псевдоклассы не поддерживаются.

Чтобы выбрать все элементы абзаца (p) в документе, у которых классы включают warning или note, можно сделать следующее:

const special = document.querySelectorAll("p.warning, p.note");

Также можно осуществлять поиск по идентификатору. Например:

const el = document.querySelector("#main, #basic, #exclamation");

После выполнения данного кода, el содержит первый элемент в документе, у которого идентификатор является одним из main, basic, или exclamation.

• Спецификация селекторов
• CSS селекторы
• Element.querySelector()
• Element.querySelectorAll()
• Document.querySelector()
• Document.querySelectorAll()