логотип PurpleSchool
логотип PurpleSchool

.querySelector() в JavaScript

Автор

Дмитрий Нечаев

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

Введение в .querySelector()

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

Синтаксис .querySelector() выглядит следующим образом:

document.querySelector(selector);

Где:

  • selector
    • это строка, представляющая собой CSS-селектор, по которому нужно выполнить поиск элемента.

Примеры использования .querySelector()

Давайте рассмотрим несколько примеров использования метода .querySelector() для поиска элементов на странице по CSS-селекторам.

1. Получение элемента по идентификатору

<div id="myDiv">Это содержимое div</div>
// Получаем элемент по его идентификатору
const myDiv = document.querySelector('#myDiv');

// Изменяем текстовое содержимое элемента
myDiv.textContent = 'Новое содержимое div';

В этом примере мы используем #myDiv в качестве CSS-селектора, чтобы получить элемент с идентификатором myDiv и изменить его содержимое.

2. Получение первого элемента определенного типа

<ul>
  <li>Пункт списка 1</li>
  <li>Пункт списка 2</li>
  <li>Пункт списка 3</li>
</ul>
// Получаем первый элемент списка
const firstListItem = document.querySelector('ul li');

// Применяем стили к первому элементу списка
firstListItem.style.fontWeight = 'bold';

В этом примере мы используем ul li в качестве CSS-селектора, чтобы получить первый элемент списка и изменить его стиль.

3. Получение элемента по классу

<div class="box">Это содержимое блока</div>
// Получаем элемент с классом "box"
const boxElement = document.querySelector('.box');

// Применяем стили к элементу с классом "box"
boxElement.style.backgroundColor = 'yellow';

В этом примере мы используем .box в качестве CSS-селектора, чтобы получить элемент с классом "box" и изменить его стиль.

Заключение

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

Стрелочка влево.querySelectorAll() в JavaScript.outerHTML в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний