querySelector и querySelectorAll

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Раньше на каждый способ поиска был свой метод: getElementById, getElementsByClassName, getElementsByTagName. Каждый умеет ровно одно и ничего не умеет комбинировать. Современный поиск устроен проще: вы передаёте строку CSS-селектора — ту же самую, что написали бы в стилях, — а браузер сам применяет её к документу.

js

const title = document.querySelector(".title");
console.log(title.tagName);
console.log(title.textContent);

// селектор может быть любой сложности
console.log(document.querySelector(".card p.title").textContent);

страница примера

Сначала предположите, что выведет код

querySelector обходит документ в порядке разметки и отдаёт первый подошедший элемент. Не самый вложенный и не самый подходящий по смыслу — просто первый сверху. Если совпадений нет, вы получите null: не пустой объект и не исключение. Поэтому обращение к свойству «найденного» элемента — типовое место падения, и ?. здесь выручает.

js

console.log(document.querySelector("#menu li.active").textContent);
console.log(document.querySelector("#menu li:last-child").textContent);

const ghost = document.querySelector(".no-such-class");
console.log(ghost);
console.log(ghost?.textContent);

страница примера

Сначала предположите, что выведет код

Селектор — это CSS, а не произвольная строка. Идентификатор "2col" в HTML совершенно законен, но querySelector("#2col") бросит SyntaxError: в CSS имя не может начинаться с цифры. getElementById("2col") при этом спокойно сработает — как и querySelector("#" + CSS.escape("2col")). Полчаса моей жизни ушло именно на это.

querySelectorAll собирает все совпадения и возвращает NodeList. Он похож на массив ровно настолько, насколько нужно для быстрого взгляда: есть length, есть доступ по индексу. Если не нашлось ничего, вернётся не null, а пустой список с length === 0 — и это удобно, потому что перебор пустого списка просто ничего не сделает.

js

const items = document.querySelectorAll("#menu li");
console.log(items.length);
console.log(items[1].textContent);
console.log(items[9]);

console.log(document.querySelectorAll(".no-such-class").length);

страница примера

Сначала предположите, что выведет код

Ключевое слово — снимок. NodeList из querySelectorAll статический: браузер один раз прошёл по документу, записал найденное и больше за страницей не следит. Добавили подходящий элемент — старая переменная об этом не узнает, нужен повторный вызов.

js

const items = document.querySelectorAll("#list li");
console.log(items.length);

const li = document.createElement("li");
li.textContent = "Хлеб";
document.querySelector("#list").append(li);

console.log(items.length);
console.log(document.querySelectorAll("#list li").length);

страница примера

Сначала предположите, что выведет код

Оба метода есть не только у document, но и у любого элемента. elem.querySelectorAll(...) ищет только среди потомков elem: сам элемент в результат не попадает, соседи и родители — тем более. Это главное лекарство от случайных совпадений: сузили область — и селектор можно писать коротким.

js

const b = document.querySelector("#b");

console.log(document.querySelectorAll(".tag").length);
console.log(b.querySelectorAll(".tag").length);
console.log(b.querySelector(".tag").textContent);

страница примера

Сначала предположите, что выведет код

Кажется, что elem.querySelector(...) применяет селектор «внутри» элемента. На самом деле браузер сопоставляет селектор со всем документом, а затем выбрасывает всё, что не является потомком elem. Отсюда странность: селектор может начинаться с предков элемента и всё равно сработает. Если нужно отсчитывать именно от элемента, помогает псевдокласс :scope.

js

const wrap = document.querySelector("#wrap");

console.log(wrap.querySelector("#wrap .tag").textContent);
console.log(wrap.querySelector("body .tag").textContent);

// :scope — это сам wrap
console.log(wrap.querySelectorAll(":scope > .tag").length);

страница примера

Сначала предположите, что выведет код

У NodeList есть собственный forEach — с тем же интерфейсом, что у массива: элемент, индекс, коллекция. И он итерируемый, а значит работают for..of, спред и деструктуризация. В большинстве задач этого достаточно, и никакие преобразования не нужны.

js

const items = document.querySelectorAll("#cart li");

items.forEach((li, i) => {
  console.log(i, li.textContent);
});

let total = 0;
for (const li of items) {
  total += Number(li.dataset.price);
}
console.log(total);

страница примера

Сначала предположите, что выведет код

for..of удобнее там, где нужны break или continue: из forEach так просто не выйти. Обычный for по индексам тоже работает — length и items[i] на месте, — но читается хуже и почти никогда не нужен.

NodeList — не массив, а отдельный класс. Он не наследует Array.prototype, поэтому map, filter, reduce, find, slice у него отсутствуют, а Array.isArray честно отвечает false. Причина историческая: DOM-коллекции появились раньше, чем эти методы у массивов, и живут в своей ветке спецификации.

Возможность	NodeList	Массив
length	есть	есть
доступ по индексу items[0]	есть	есть
forEach	есть	есть
for..of, спред, деструктуризация	есть	есть
map / filter / reduce / find	нет	есть
Array.isArray(...)	false	true

Чинится в одну строку: Array.from(items) или [...items] — оба дают настоящий массив, потому что NodeList итерируемый. У Array.from есть бонус: вторым аргументом принимается функция преобразования, и лишний проход по коллекции не понадобится.

js

const items = document.querySelectorAll("#cart li");
console.log(Array.isArray(items));
console.log(typeof items.map);

const prices = Array.from(items, (li) => Number(li.dataset.price));
console.log(prices);

const cheap = [...items].filter((li) => Number(li.dataset.price) < 200);
console.log(cheap.length);

const [first] = items;
console.log(first.textContent);

страница примера

Сначала предположите, что выведет код

Старые методы отдают HTMLCollection — не снимок, а запрос, который пересчитывается при каждом обращении: добавили элемент, и length вырос сам. Звучит удобно, но именно на этом ломаются циклы, которые в теле что-то добавляют или удаляют. И forEach у HTMLCollection нет. Подробно эти методы и их ловушки — в статье про getElementById и старые методы.

js

const box = document.querySelector("#box");
const live = box.getElementsByTagName("span");
const shot = box.querySelectorAll("span");
console.log(live.length, shot.length);

box.append(document.createElement("span"));
console.log(live.length, shot.length);
console.log(typeof live.forEach);

страница примера

Сначала предположите, что выведет код

querySelector и querySelectorAll принимают любой CSS-селектор — тот же, что вы пишете в стилях.
querySelector отдаёт первый подходящий элемент в порядке разметки или null; querySelectorAll — NodeList, при неудаче пустой.
NodeList из querySelectorAll статический: это снимок на момент вызова, изменения DOM в нём не появятся.
Оба метода работают и на элементе, ограничивая результат его потомками, хотя сам селектор сопоставляется со всем документом — для отсчёта от элемента есть :scope.
NodeList итерируемый и имеет forEach, но не map и не filter: нужен массив — Array.from(items) или [...items].

1/3document.querySelector(".missing") не нашёл ни одного элемента. Что он вернёт?

2/3Список получен через const items = document.querySelectorAll("li"), после чего в документ добавили ещё один li. Чему равен items.length?

3/3Почему items.map(...) на результате querySelectorAll падает с TypeError?

Сумма только доступных товаров

В корзине три позиции, но в наличии лишь часть — у них класс in-stock. Посчитайте сумму data-price только по доступным и выведите её. Постарайтесь отфильтровать не циклом с if, а самим селектором.

js

// посчитайте сумму data-price у li.in-stock
const sum = 0;
console.log(sum); // должно получиться 350

страница примера

Сначала предположите, что выведет код

Условие «в наличии» переносим прямо в селектор — тогда фильтровать в JavaScript уже нечего. NodeList превращаем в массив спредом и складываем через reduce.

jsлистинг · не запускается

const items = document.querySelectorAll("#cart li.in-stock");
const sum = [...items].reduce((acc, li) => acc + Number(li.dataset.price), 0);
console.log(sum); // 350

const items = document.querySelectorAll("#cart li.in-stock");
const sum = [...items].reduce((acc, li) => acc + Number(li.dataset.price), 0);
console.log(sum); // 350

Без превращения в массив тоже нормально: let sum = 0; for (const li of items) sum += Number(li.dataset.price); — NodeList итерируемый, этого достаточно.

Только внутри второй карточки

На странице две карточки, в каждой свои теги с классом tag. Соберите массив строк с текстами тегов второй карточки — так, чтобы теги первой в него не попали.

js

const second = null; // найдите вторую карточку
const tags = []; // соберите тексты .tag внутри неё
console.log(tags); // должно получиться ["css", "html"]

страница примера

Сначала предположите, что выведет код

Сначала берём вторую карточку по индексу, затем ищем теги на ней, а не на документе. Array.from сразу превращает NodeList в массив строк вторым аргументом.

jsлистинг · не запускается

const second = document.querySelectorAll(".card")[1];
const tags = Array.from(second.querySelectorAll(".tag"), (el) => el.textContent);
console.log(tags); // ["css", "html"]

const second = document.querySelectorAll(".card")[1];
const tags = Array.from(second.querySelectorAll(".tag"), (el) => el.textContent);
console.log(tags); // ["css", "html"]

Главное здесь — вызов querySelectorAll на элементе: он ограничивает поиск потомками карточки. Вариант [...second.querySelectorAll(".tag")].map((el) => el.textContent) делает то же самое за два прохода.

querySelector и querySelectorAll

Видеоразбор темы за 5–7 минут

Селектор вместо десяти методовОдна CSS-строка вместо десятка методов

querySelectorAllВесь список одним вызовом, но застывший

Поиск внутри элементаТот же метод на любом элементе

Перебор NodeListforEach, for..of и почему их хватает

Похож на массив, но им не являетсяНет map — есть Array.from и спред

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Сумма только доступных товаров

Только внутри второй карточки