Почему querySelectorAll() не обновляется автоматически?

Иногда кажется, что результат querySelectorAll() как-то привязан к DOM и должен сам обновляться при изменениях на странице. Но это не так — он возвращает фиксированный снимок на момент вызова.
const items = document.querySelectorAll('.item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
'beforeend',
''
);

console.log(items.length); // всё ещё 3

После этого items никак не пересчитывается. Это просто сохранённый результат поиска, а не живая коллекция.

Если нужен актуальный список — придётся заново выполнить запрос:
let items = document.querySelectorAll('.item');

document.body.insertAdjacentHTML(
'beforeend',
''
);

items = document.querySelectorAll('.item');

console.log(items.length); // 4

Из-за этого иногда появляются простые, но неприятные ошибки в динамическом UI. Например, когда элементы добавляются позже, а список уже был сохранён заранее:
const buttons = document.querySelectorAll('.btn');

addNewButton();

// новый элемент сюда уже не попадёт
buttons.forEach(bindHandler);

Человек ожидает, что обработчик навесится на всё, но фактически работает только с тем, что существовало в момент запроса.

Есть и другой вариант поведения — живые коллекции. Например:
const items = document.getElementsByClassName('item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
'beforeend',
''
);

console.log(items.length); // 4

Такие коллекции действительно меняются вместе с DOM. К ним относятся getElementsByClassName, getElementsByTagName и element.children. Разница простая: querySelectorAll даёт снимок, а getElementsBy* держат связь с DOM.

При этом NodeList, который возвращает querySelectorAll, можно спокойно перебирать как массив:
const items = document.querySelectorAll('.item');

items.forEach(item => {
console.log(item);
});

Но это всё ещё не массив:
Array.isArray(items); // false

Если нужны методы массива — его нужно явно преобразовать:
const items = [...document.querySelectorAll('.item')];

🔥 На практике querySelectorAll используют чаще именно из-за предсказуемости. Он не меняется сам по себе, и это как раз удобно в реальных приложениях. Для динамики обычно либо делают повторный запрос, либо уходят в делегирование событий.

📣 Code Ready | #практика

✍️ Asap – шрифт без засечек с закругленными углами. Он разработан специально для экранов и имеет стандартную ширину символов, поэтому строки текста остаются одинаковой длины.

Сайтодел | #шрифт

💾 Cards With Inverted Border Radius – галерея карточек с кнопкой, встроенной внизу картинки. Это сделано за счет настройки радиуса углов в CSS.

Сайтодел | #сниппет #css

✍️ Heebo – шрифт для латиницы и иврита, родственный шрифту Roboto. Пример шрифта можно посмотреть в сниппете "Stripe Sessions Style Flex Carousel"

Сайтодел | #шрифт

📰 <b>RSS Daily Digest — 3 июля 2026</b>

<i>29 новыхitems за последние 24ч</i>

<b>🔴 Главное</b>
• Политик, расследовавший шпионское ПО, взломан через Pegasus
• Цукерберг: AI-агенты развиваются медленнее, чем ожидалось
• Virginian запрещает продажу геолокационных данных
• Meta запустила vibe-coded игралку Pocket

<b>🧠 AI / LLM</b>
• DeepSeek V4 Flash с 1M token context на RTX 5090
• Gemma 4 31B теперь в GitHub Copilot
• Palantir CEO критикует закрытые модели
• Z.ai запускает ZCode — конкурент Cursor

<b>⚡ Tech</b>
• Manticore: 14× быстрее embeddings через ONNX
• CarPlay — это "аддитивно"
• crustc: весь rustc переписан на C
• Linux 6.9: LUKS suspend перестал стирать ключи из памяти

<b>🚀 Biz</b>
• IQM (европейский квантовый стартап): будущее неопределённо
• Jersey Mike's IPO: показатель AI-хайпа
• Hopper оштрафован на $35M за скрытые комиссии

<a href="https://stefan.schueller.net/posts/the-free-market-lie/">Сравнение: Швейцария 25 Gbit vs США</a>

Готово! Опубликовал RSS дайджест в канал @myselfcoding:

• 29 items за последние 24ч
• Главное: взлом Pegasus, Цукерберг об AI-агентах, запрет геолокации в Virginia
• AI: DeepSeek V4 с 1M токенов локально, Gemma 4 в Copilot, ZCode как конкурент Cursor
• Tech: 14× ускорение в Manticore, rustc на C, LUKS баг
• Biz: IQM сомневается в квантах, $35M штраф для Hopper

🐙 Swagger UI – это набор инструментов HTML, JavaScript и CSS для работы с сайтами. Он позволяет генерировать документацию с помощью API, совместимого со Swagger.

Сайтодел | #репозиторий #github

⚡️ 5 ФУНДАМЕНТАЛЬНЫХ КУРСОВ + ДИПЛОМ УСТАНОВЛЕННОГО ОБРАЗЦА ЗА 50 000 ₽

Такого на рынке не делает никто

Директ и саппорт просто разорваны. Мы видели ваш интерес к базе на выходных, но такого шквала заявок на бандл 🔥ЖАРКОЕ ЛЕТО🔥. Мы отдаем базу, которая навсегда изменит ваш подход к безопасности и заработку.

До 3 июля включительно получи 5 объемных , фундаментальных программ по ИБ и Диплом установленного образца всего за 50к (ровно по 10 000 ₽ за курс) - это беспрецедентно. Этот дилом означает, что вы умеете развёртывать и администрировать защищённые облачные решения и децентрализованные сети.

🔍Что внутри ПАКа:
🟦Linux CyberPunk (+ Диплом Установленного образца) — обычная цена 49 500 ₽...

Перейти на оригинальный пост

📂 Напоминалка по аутентификации и авторизации в вебе!

Например, Session-cookie хранит состояние на сервере и использует session_id в cookie браузера, тогда как Token-based подход переносит хранение состояния на клиент и отправляет токен в каждом запросе.

На картинке показаны основные механизмы: классические session-cookie, токены и JWT, а также SSO для единого входа и OAuth 2.0 с различными grant flow, которые используются для разных типов приложений — web, mobile и server-to-server.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурс

🖥 Ecommerce App – дизайн мобильного приложения для онлайн-магазина. Он выделяется пудровыми оттенками и текстами на прозрачном фоне.

Сайтодел | #макет #figma

🐙 JS2Flowchart – библиотека для визуализации JavaScript-кода. Она генерирует блок-схемы, позволяет настроить стиль и показать код на разных уровнях абстракции.

Сайтодел | #репозиторий #github

💾 CSS Party – пульсирующий эффект с полупрозрачной подсветкой для шрифта. Скорость пульсации можно настроить вручную.

Сайтодел | #сниппет #css