Queryselector js что это

Queryselector js что это

Объектная модель документа — DOM — это не что иное, как древовидная структура, состоящая из тегов, существующих в HTML документе.

У нас есть все эти элементы HTML, расположенные рядом друг с другом, которые мы хотим получить, а затем прочитать данные в них или изменить. Есть много способов найти эти тэги, так как они расположены в древовидной структуре. В этой статье вы узнаете, как использовать две встроенные функции JavaScript, такие как querySelector и querySelectorAll для поиска html тэгов.

Метод querySelector

Для понимания сути функционирования методов querySelector и querySelectorAll посмотрите на следующий HTML:

В этом примере у нас есть один div с идентификатором main и четыре вложенных в него элемента div и img, каждый из которых имеет значение класса pic-container и profileImage соответственно. В следующих нескольких разделах мы применим функции querySelector и querySelectorAll на этом HTML-коде и посмотрим, что произойдет.

querySelector

Функция querySelector работает следующим образом:

var element = document.querySelector(" ");

Функция querySelector принимает аргумент, и этот аргумент является CSS селектором для элемента, который вы хотите найти. То, что возвращает функция querySelector, является первым элементом, который она находит, даже если существуют другие элементы, которые могут быть похожи на данный селектор.

Смотря на HTML из нашего предыдущего примера, если мы хотим получить доступ к div, чей идентификатор является main, нужно написать следующее:

var element = document.querySelector("#main");

Поскольку main является идентификатором, синтаксис селектора для его получения будет #main . Аналогично, селектор класса pic-container :

var element = document.querySelector(".pic-container");

Возвращается первый блок div , значение класса которого является pic-container . Остальные элементы div со значением класса pic-container просто игнорируются.

Синтаксис селекторов для данной функции не создавался специально, потому можно использовать точный синтаксис, который вы использовали бы для селекторов в таблице стилей!

На этом все, а в следующей статье я расскажу про следующую функцию querySelectorAll.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Читайте также:  Nalog42 ru личный кабинет налогоплательщика инн

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?

    Для этого в DOM есть дополнительные методы поиска.

    document.getElementById или просто id

    Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.

    Также есть глобальная переменная с именем, указанным в id :

    …Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

    Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.

    Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

    В этом учебнике мы будем обращаться к элементам по id в примерах для краткости, когда очевидно, откуда берётся элемент.

    В реальной жизни лучше использовать document.getElementById .

    Значение id должно быть уникальным. В документе может быть только один элемент с данным id .

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

    Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.

    querySelectorAll

    Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.

    Следующий запрос получает все элементы
    , которые являются последними потомками в

      :

    Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.

    Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.

    querySelector

    Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.

    Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.

    matches

    Предыдущие методы искали по DOM.

    Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .

    Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.

    Читайте также:  Mail моя страница восстановить

    closest

    Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.

    Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.

    Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.

    getElementsBy*

    Существуют также другие методы поиска элементов по тегу, классу и так далее.

    На данный момент, они скорее исторические, так как querySelector более чем эффективен.

    Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

    • elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков.
    • elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
    • document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.

    Давайте найдём все input в таблице:

    Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву "s" . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

    Буква "s" отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому "s" обязательна.

    Другая распространённая ошибка – написать:

    Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

    Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

    Ищем элементы с классом .article :

    Живые коллекции

    Все методы "getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

    В приведённом ниже примере есть два скрипта.

      Первый создаёт ссылку на коллекцию

    Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

    Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :

    Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.

    Итого

    Есть 6 основных методов поиска элементов в DOM:

    Метод Ищет по. Ищет внутри элемента? Возвращает живую коллекцию?
    querySelector CSS-selector
    querySelectorAll CSS-selector
    getElementById id
    getElementsByName name
    getElementsByTagName tag or ‘*’
    getElementsByClassName class

    Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElementBy* могут быть полезны в отдельных случаях, а также встречаются в старом коде.

    • Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
    • Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
    Читайте также:  Asus ati radeon hd 5870 1gb

    И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

    • elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .

    Задачи

    Поиск элементов

    Вот документ с таблицей и формой.

    1. Таблицу с .
    2. Все элементы label внутри этой таблицы (их три).
    3. Первый td в этой таблице (со словом «Age»).
    4. Форму form с именем name="search" .
    5. Первый input в этой форме.
    6. Последний input в этой форме.

    Определение и применение

    JavaScript метод document .querySelector() возвращает первый элемент в документе (объект Element ), соответствующий указанному селектору, или группе селекторов. Если совпадений не найдено, то возвращается значение null .

    Обращаю Ваше внимание на то, что не допускается использование CSS псевдоэлементов в качестве значения селектора для поиска элементов, в этом случае в качестве возвращаемого значения всегда будет значение null .

    Если вам необходим список всех элементов, соответствующих указанному селектору или селекторам, то используйте для этого метод querySelectorAll().

    Метод .querySelector() также определен в объекте Element , по этой причине он может быть вызван на любом элементе, не только на объекте document . Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

    Поддержка браузерами

    Метод Chrome Firefox Opera Safari IExplorer Edge
    document .querySelector() Да Да Да Да 8.0* Да

    JavaScript синтаксис:

    Спецификация

    Значения параметров

    Параметр Описание
    selectors Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов.
    Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты (""). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

    Исключения

    Тип исключения Описание
    SYNTAX_ERR Возникает в том случае, если синтаксис указанного селектора или селекторов некорректен.

    Пример использования

    В этом примере мы с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию myFunc() , которая с использованием JavaScript метода document .querySelector() выбирает следующие элементы:

    • Первый элемент с классом block в документа и устанавливаем черный цвет заднего фона найденному элементу.
    • Первый элемент из заданных селекторов (элемент с классом first, элемент с классом block) и устанавливаем красный цвет текста найденному элементу. В этом случае будет выбран первый найденный элемент из заданных селекторов.
    • Элемент

    Результат нашего примера:

    Пример использования JavaScript метода document.querySelector() JavaScript Document

    Ссылка на основную публикацию
    Adblock detector