Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
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()