Locating DOM elements using selectors

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

Интерфейс NodeSelector (The NodeSelector interface)

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

querySelector: Возвращает первый совпадающий узел Element внутри поддерева. Если совпадающих узлов нет, будет возвращён null.
querySelectorAll: Возвращает NodeList, содержащий все подходящие узлы Element внутри поддерева узлов. Или возвращает пустой NodeList, если совпадений не найдено.

Примечание: NodeList, возвращаемый методом querySelectorAll(), не настоящий. Этот список отличается от других методов поиска DOM, которые возвращают настоящие (живые) узлы.

Вы можете найти примеры и детали, прочитав документацию для методов querySelector() и querySelectorAll(), а также в статье Code snippets for querySelector.

Selectors

Селекторные методы принимают один или больше селекторов, разделённых запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы warning или note, можно сделать следующее:

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

Также можно искать по ID. Например:

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

После выполнения кода выше, el будет содержать первый элемент в документе, чей ID main, basic или exclamation

Вы можете использовать любые CSS-селекторы в методах querySelector(), querySelectorAll()