Использование метода QuerySelector для работы с элементами в JavaScript

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

// HTML
<p class="my-paragraph">Пример текста</p>

// JavaScript
const element = document.querySelector('.my-paragraph');
console.log(element.textContent); // Выводит "Пример текста"

Метод querySelector принимает один параметр - строку селектора, который представляет собой либо имя элемента, либо класс, либо идентификатор, либо другие CSS-селекторы, включая комбинированные.

Вот некоторые примеры кода для демонстрации работы querySelector:

1. Использование селектора элемента:

// JavaScript
const element = document.querySelector('p');
console.log(element); // Выводит первый элемент p на странице

2. Использование селектора класса:

// JavaScript
const element = document.querySelector('.my-class');
console.log(element); // Выводит первый элемент с классом "my-class"

3. Использование селектора идентификатора:

// JavaScript
const element = document.querySelector('#my-id');
console.log(element); // Выводит элемент с идентификатором "my-id"

4. Использование комбинированных селекторов:

// JavaScript
const element = document.querySelector('div .my-class');
console.log(element); // Выводит первый элемент с классом "my-class" внутри тега div

Метод querySelector всегда возвращает первый элемент на странице, удовлетворяющий заданному селектору. Если элемент не найден, то метод вернет значение null. Поэтому, если вам нужно получить все элементы, соответствующие селектору, вам следует использовать метод querySelectorAll, который возвращает NodeList.

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