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()

See also