JavaScript querySelector: основные примеры и синтаксис

querySelector – это метод JavaScript, который позволяет находить HTML-элементы на веб-странице с использованием CSS-подобного синтаксиса.

Для начала давайте разберемся, как использовать querySelector. Для того чтобы найти элемент на странице, нужно вызвать метод querySelector у объекта document, указав селектор в качестве аргумента. Селектор – это строка, которая содержит спецификацию элемента или группы элементов, которые вы хотите найти.

Например, предположим, что у нас есть следующий HTML-код:

<div id="myDiv">
   <p class="text">Пример текста</p>
   <p class="text">Еще один абзац</p>
   <p>NoClass</p>
</div>

Если мы хотим получить первый абзац внутри элемента с id "myDiv", мы можем использовать следующий код:

const myParagraph = document.querySelector("#myDiv p");

В данном случае, селектор #myDiv p означает "найти элемент <p> внутри элемента с id 'myDiv'". Результатом этой строки будет первый абзац.

Метод querySelector может принимать различные селекторы, включая id, классы, атрибуты и другие. Например, если мы хотим найти все элементы с классом "text", мы можем использовать следующий код:

const paragraphs = document.querySelectorAll(".text");

В этом примере, метод querySelectorAll возвращает коллекцию элементов, которые соответствуют селектору ".text". Мы можем использовать цикл или методы коллекции для выполнения операций с каждым найденным элементом.

Иногда возникает необходимость найти элементы с определенными атрибутами или значениями атрибутов. Например, мы можем извлечь все ссылки на странице, имеющие атрибут "data-category" со значением "news". Это можно сделать следующим образом:

const links = document.querySelectorAll("a[data-category='news']");

В данном случае, селектор "a[data-category='news']" означает "найти ссылки (<a>) с атрибутом data-category равным 'news'".

Для работы с найденными элементами, мы можем использовать свойства и методы API DOM, чтобы выполнять различные операции, такие как изменение содержимого элементов, добавление или удаление классов, изменение стилей и т.д.

Например, если мы хотим изменить текст абзаца, мы можем сделать это следующим образом:

myParagraph.textContent = "Новый текст";

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