Frontend Academy · Урок

querySelector и querySelectorAll

Находите один или несколько элементов с помощью строк селекторов CSS и изучайте различие между NodeList и HTMLCollection.

«querySelector и querySelectorAll» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое DOM

Объектная модель документа — это дерево объектов JavaScript, представляющее структуру HTML. JavaScript взаимодействует с DOM, чтобы читать, изменять, добавлять и удалять элементы, делая веб-страницы динамичными.

getElementById

Классический селектор. document.getElementById('myId') возвращает элемент с указанным идентификатором или null, если элемент не найден. Он работает быстро, но поддерживает только идентификаторы.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — один элемент

document.querySelector(cssSelector) возвращает первый элемент, соответствующий любому селектору CSS. Если совпадений нет, возвращается null. Этот метод гибче, чем getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — несколько элементов

document.querySelectorAll(cssSelector) возвращает статический NodeList всех совпавших элементов. Это не живой массив — его нужно перебрать. Используйте Array.from() или оператор spread, чтобы применять методы массивов.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Запросы в заданной области

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

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList и HTMLCollection

NodeList (возвращаемый querySelectorAll) является статическим и отражает состояние DOM на момент выполнения запроса. HTMLCollection (возвращаемая, например, методами поиска элементов по имени класса) является живой и автоматически обновляется при изменении DOM. Оба объекта похожи на массивы, но массивами не являются.

Обход DOM

Из любого элемента можно перейти к другим элементам с помощью: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Проверка существования элемента

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

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() и closest()

element.matches(selector) возвращает true, если элемент соответствует селектору. element.closest(selector) поднимается по дереву DOM и возвращает первого предка, соответствующего селектору, или null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) возвращает true, если дочерний элемент находится внутри родителя или сам является этим родителем. Это полезно для проверки того, произошёл ли щелчок за пределами модального окна или раскрывающегося списка.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Производительность: минимизация запросов к DOM

Запросы к DOM не бесплатны. Сохраняйте результат в переменной вместо многократного вызова querySelector. В циклах группируйте чтение DOM и запись в DOM, чтобы избежать лишних перерасчётов макета.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Быстрая проверка

Какой метод возвращает статический NodeList всех совпавших элементов?

Повторение: выбор элементов DOM

querySelector возвращает первое совпадение. querySelectorAll возвращает все совпадения в статическом NodeList. Для повышения эффективности ограничивайте запросы поддеревом. Кэшируйте результаты запросов. Используйте closest() для делегирования событий. Всегда проверяйте результат запроса на null перед использованием элемента.

Часто задаваемые вопросы

Урок «querySelector и querySelectorAll» бесплатный?

Да — полный текст урока «querySelector и querySelectorAll» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «querySelector и querySelectorAll»?

Находите один или несколько элементов с помощью строк селекторов CSS и изучайте различие между NodeList и HTMLCollection. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «querySelector и querySelectorAll»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

querySelector и querySelectorAll
addEventListener и объект события
Изменение содержимого: textContent, innerHTML, classList
Создание и добавление элементов

← Назад к Frontend Academy