Выбор элементов с помощью querySelector
Находите элементы с помощью селекторов CSS.
«Выбор элементов с помощью querySelector» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Знакомство с querySelector
querySelector возвращает первый элемент, соответствующий селектору CSS, или null, если совпадений нет. Этот метод доступен у document и у каждого элемента.
const title = document.querySelector("h1");
console.log(title.textContent);Подходит любой селектор CSS
Преимущество querySelector в том, что он принимает те же селекторы, что и CSS: теги, классы, идентификаторы, атрибуты и их комбинации.
document.querySelector("#main"); // by id
document.querySelector(".card"); // by class
document.querySelector("input[type=email]"); // by attributequerySelectorAll
querySelectorAll возвращает все подходящие элементы в виде статического NodeList. Даже при отсутствии совпадений он возвращает пустой список, а не null.
const cards = document.querySelectorAll(".card");
console.log(cards.length);Перебор результатов
NodeList, возвращённый методом querySelectorAll, напрямую поддерживает forEach, поэтому перебор получается простым и аккуратным.
const items = document.querySelectorAll("li");
items.forEach((li) => {
console.log(li.textContent);
});Селекторы потомков
Вы можете находить вложенные элементы с помощью пробела — селектора потомков, как в CSS. Этот запрос найдёт каждый .price внутри .product.
const prices = document.querySelectorAll(".product .price");Объединение классов
Если объединить классы без пробела, элемент должен иметь все эти классы. Здесь мы находим кнопки, которые одновременно являются основными и большими.
const btn = document.querySelector("button.primary.large");Запросы в ограниченной области
Вызов querySelector у элемента, а не у document, выполняет поиск только внутри этого элемента. Благодаря этому поиск остаётся локальным и быстрым.
const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");Псевдоклассы
Структурные псевдоклассы, такие как :first-child и :nth-of-type, тоже работают.
document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");Обработка отсутствия совпадений
Поскольку querySelector может вернуть null, перед использованием результата проверьте его, чтобы избежать ошибки TypeError.
const banner = document.querySelector(".banner");
if (banner) {
banner.classList.add("hidden");
}Селекторы атрибутов
Селекторы атрибутов позволяют выполнять поиск по атрибутам данных. Это удобно, когда нужно обращаться к элементам, не полагаясь на классы.
const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");querySelector и старые интерфейсы
querySelector гибче, чем getElementById, поскольку принимает любой селектор, однако поиск по идентификатору всё же немного быстрее. Используйте подходящий инструмент для каждой задачи.
document.querySelector("#nav"); // flexible
document.getElementById("nav"); // fastest for idsБыстрая проверка
Проверьте, насколько хорошо вы понимаете селекторы.
Итоги
Вы узнали, что querySelector возвращает первое совпадение или значение null, а querySelectorAll — статический список NodeList всех совпадений. Оба метода принимают полноценные селекторы CSS, а область поиска можно ограничить родительским элементом. При использовании querySelector всегда проверяйте результат на null.
Часто задаваемые вопросы
Урок «Выбор элементов с помощью querySelector» бесплатный?
Да — полный текст урока «Выбор элементов с помощью querySelector» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Выбор элементов с помощью querySelector»?
Находите элементы с помощью селекторов CSS. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Выбор элементов с помощью querySelector»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Выбор элементов с помощью querySelector
- getElementById и getElementsByClassName
- Переход между родителями, дочерними и соседними элементами
- NodeList и HTMLCollection