JavaScript селекторы. Разбор селектора и поиск

Within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Note : The matching is done using depth-first pre-order traversal of the document"s nodes starting with the first element in the document"s markup and iterating through sequential nodes by order of the number of child nodes.

Syntax element = document.querySelector(selectors); Parameters selectors A DOMString containing one or more selectors to match. This string must be a valid CSS selector string; if it isn"t, a SYNTAX_ERR exception is thrown. See Locating DOM elements using selectors for more about selectors and how to manage them.

Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See for more information.

Return value Exceptions SYNTAX_ERR The syntax of the specified selectors is invalid. Usage notes

If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

Escaping special characters

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash (" \ "). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):

console.log("#foo\bar"); // "#fooar" (\b is the backspace control character) document.querySelector("#foo\bar"); // Does not match anything console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Match the first div document.querySelector("#foo:bar"); // Does not match anything document.querySelector("#foo\\:bar"); // Match the second div

Examples Finding the first element matching a class

In this example, the first element in the document with the class " myclass " is returned:

Var el = document.querySelector(".myclass");

A more complex selector

Selectors can also be really powerful, as demonstrated in the following example. Here, the first element with the name "login" () located inside a whose class is "user-panel main" () in the document is returned:

Var el = document.querySelector("div.user-panel.main input");

Specifications Specification Status Comment

DOM The definition of "document.querySelector()" in that specification.	Living Standard

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet querySelector

Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 8	Opera Full support 10	Safari Full support 3.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android ?

Legend Full support Full support Compatibility unknown Compatibility unknown

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

Поиск по id

Если в коде страницы элементу задан атрибут id , то элемент можно найти по id. Это самый простой способ. Поиск элемента производится с помощью метода getElementById() глобального объекта document.

document.getElementById (id)

Параметры:

id - id элемента, который нужно найти. id - это строка, поэтому она должна быть в кавычках.

Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

HTML код:

JavaScript:

var block = document.getElementById("block"); console.log(block);

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

Так как посик по id - это самый простой и удобный способ, часто используют именно его. Если с каким-то элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут id , даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

document.getElementsByClassName (класс)

Параметры:

класс - класс элементов, которые нужно найти

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

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

HTML код:

JavaScript:

Теперь найдены только те элементы, которые расположены в блоке.

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

document.getElementsByTagName (тэг)

Параметры:

тэг - тэг элементов, которые нужно найти

Найдём все тэги p , которые есть на странице:

var p = document.getElementsByTagName("p"); console.log(p);

Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги p , находящиеся в блоке.

Поиск по селектору

Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

HTML код:

Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

элемент.previousElementSibling

элемент.nextElementSibling

Найдём элемент, следующий за блоком:

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

элемент.children

Найдём дочерние элементы блока.

На этом уроке мы рассмотрим методы объекта document , которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.

Методы, предназначенные для поиска узла или коллекции узлов в дереве

На предыдущем уроке мы рассмотрели свойства, с помощью которых мы можем перемещаться по дереву и находить нужные нам узлы. Но, поиск узлов с помощью их свойств занятие очень трудное и не эффективное. Поэтому чтобы найти узлы в дереве, веб-разработчики обычно используют специально предназначенные для этого методы объекта document или узла (node).

Метод getElementById()

Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null .

В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id , т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id , то метод getElementById() вернёт первый найденный элемент.

document.getElementById(elementID)

Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.

Например, изменить цвет текста элемента, имеющего id="nameArticie" .

Название статьи

• 1 пункт
• 2 пункт
• 3 пункт

//Получить элемент (узел), имеющий id="nameArticle" var nameArticle = document.getElementById("nameArticle"); //изменить цвет текста элемента nameArticle.style.color = "blue";

Метод getElementsByClassName()

Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList , представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.

Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList . А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

Var elementsList = document.getElementsByClassName("list"); for (var i=0; i