Locating DOM elements using selectors

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

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

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

querySelector

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

querySelectorAll

Возвращает NodeList (en-US), содержащий все подходящие узлы Element внутри поддерева узлов. Или возвращает пустой NodeList, если совпадений не найдено.

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

Вы можете найти примеры и детали, прочитав документацию для методов querySelector() (en-US) и querySelectorAll() (en-US), а также в статье 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()

See also