логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool

.querySelector() в JavaScript

Автор

Дмитрий Фандорин

.querySelector() - это метод JavaScript, который позволяет получить первый элемент на веб-странице, соответствующий заданному CSS-селектору. Он используется для того, чтобы получить ссылку на элемент и работать с ним в JavaScript.

Форма записи

.querySelector() имеет следующий синтаксис:

document.querySelector(cssSelector);

где:

  • cssSelector
    • это строка, содержащая CSS-селектор, по которому мы ищем элемент.

Пример использования .querySelector() для получения ссылки на первый элемент с классом myClass:

<div class="myClass">Это мой элемент 1</div>
<div class="myClass">Это мой элемент 2</div>
<p>Это не мой элемент</p>
const element = document.querySelector('.myClass');
element.style.color = 'red';

В данном примере мы используем метод .querySelector() для получения ссылки на первый элемент с классом myClass, а затем изменяем его цвет текста на красный.

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

Описание работы

.querySelector() работает путем поиска первого элемента на веб-странице, который соответствует заданному CSS-селектору. Если элемент найден, метод возвращает ссылку на этот элемент. CSS-селекторы представляют собой строку, описывающую правила выбора элементов на основе их атрибутов, классов, идентификаторов, типов элемента и т.д.

Пример использования .querySelector() для получения ссылки на первый элемент с идентификатором myId:

<div id="myId">Это мой элемент</div>
<p>Это не мой элемент</p>
const element = document.querySelector('#myId');
element.style.color = 'red';

В данном примере мы используем CSS-селектор #myId для поиска элемента с идентификатором myId, а затем изменяем его цвет текста на красный.

Заключение

.querySelector() - это метод JavaScript, который позволяет получить первый элемент на веб-странице, соответствующий заданному CSS-селектору. Он используется для того, чтобы получить ссылку на элемент и работать с ним в JavaScript.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile