QuerySelector JavaScript: The Ultimate Guide to DOM Manipulation

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

Примеры кода:

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

html
Пример

Используя querySelector, мы можем найти первый абзац на странице с помощью его id:

javascript
const paragraph = document.querySelector("#myParagraph");
console.log(paragraph.innerText); // Выведет "Пример"

2. Мы также можем использовать селекторы классов для выбора элементов. Представим следующий HTML:

html
Пример 1
Пример 2
Пример 3

Используя querySelector, мы можем выбрать первый div с классом "myDiv":

javascript
const div = document.querySelector(".myDiv");
console.log(div.innerText); // Выведет "Пример 1"

3. QuerySelector также позволяет использовать сложные селекторы. Предположим, что у нас есть следующий HTML:

html

  
Элемент 1
  
Элемент 2
  
Элемент 3
  
Элемент 4

Мы можем выбрать элемент списка с классом "highlighted" и получить его текст:

javascript
const listItem = document.querySelector("ul li.highlighted");
console.log(listItem.innerText); // Выведет "Элемент 3"

QuerySelector имеет широкие возможности и гибкость в работе с выбором элементов на странице. Он позволяет использовать различные селекторы, чтобы выбирать элементы по их id, классу, тегу или даже атрибуту. С помощью метода querySelectorAll можно выбрать все соответствующие элементы и получить NodeList, который можно перебирать с помощью цикла или использовать как массив.