Code Ready | Frontend
Відкрити в Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready
Показати більше📈 Аналітичний огляд Telegram-каналу Code Ready | Frontend
Канал Code Ready | Frontend (@code_ready) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 21 699 підписників, посідаючи 5 997 місце в категорії Технології та додатки та 30 482 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 21 699 підписників.
За останніми даними від 25 серпня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на 192, а за останні 24 години на 18, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 7.98%. Протягом перших 24 годин після публікації контент зазвичай збирає 4.56% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 1 731 переглядів. Протягом першої доби публікація в середньому набирає 990 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 23.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як css, браузер, интерфейс, загрузка, api.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Автор: @energy_c
РКН: https://clck.ru/3NJCKs
Реклама на бирже: https://telega.in/c/code_ready”
Завдяки високій частоті оновлень (останні дані отримано 26 серпня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
21 699
Підписники
+1824 години
+827 днів
+19230 день
Триває завантаження даних...
Схожі канали
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
Хмара тегів
Вхідні та вихідні згадування
---
---
---
---
---
---
Залучення підписників
серпень '26
серпень '26
+544
в 285 каналах
липень '26
+63
в 38 каналах
Get PRO
червень '26
+123
в 19 каналах
Get PRO
травень '26
+159
в 31 каналах
Get PRO
квітень '26
+90
в 31 каналах
Get PRO
березень '26
+234
в 68 каналах
Get PRO
лютий '26
+220
в 22 каналах
Get PRO
січень '26
+1 062
в 125 каналах
Get PRO
грудень '25
+433
в 124 каналах
Get PRO
листопад '25
+1 202
в 266 каналах
Get PRO
жовтень '25
+733
в 100 каналах
Get PRO
вересень '25
+1 126
в 108 каналах
Get PRO
серпень '25
+1 117
в 240 каналах
Get PRO
липень '25
+897
в 55 каналах
Get PRO
червень '25
+1 017
в 87 каналах
Get PRO
травень '25
+2 027
в 323 каналах
Get PRO
квітень '25
+117
в 1 каналах
Get PRO
березень '25
+130
в 2 каналах
Get PRO
лютий '25
+125
в 0 каналах
Get PRO
січень '25
+130
в 3 каналах
Get PRO
грудень '24
+234
в 5 каналах
Get PRO
листопад '24
+259
в 7 каналах
Get PRO
жовтень '24
+2 497
в 247 каналах
Get PRO
вересень '24
+3 493
в 269 каналах
Get PRO
серпень '24
+337
в 2 каналах
Get PRO
липень '24
+140
в 1 каналах
Get PRO
червень '24
+793
в 7 каналах
Get PRO
травень '24
+2 442
в 26 каналах
Get PRO
квітень '24
+2 945
в 37 каналах
Get PRO
березень '24
+1 802
в 42 каналах
Get PRO
лютий '24
+1 591
в 37 каналах
Get PRO
січень '24
+4 288
в 28 каналах
Get PRO
грудень '23
+795
в 23 каналах
Get PRO
листопад '23
+693
в 31 каналах
Get PRO
жовтень '23
+443
в 12 каналах
| Дата | Залучення підписників | Згадування | Канали | |
| 26 серпня | +9 | |||
| 25 серпня | +26 | |||
| 24 серпня | +50 | |||
| 23 серпня | +8 | |||
| 22 серпня | +8 | |||
| 21 серпня | +10 | |||
| 20 серпня | +18 | |||
| 19 серпня | +34 | |||
| 18 серпня | +48 | |||
| 17 серпня | +43 | |||
| 16 серпня | +10 | |||
| 15 серпня | +5 | |||
| 14 серпня | +3 | |||
| 13 серпня | +7 | |||
| 12 серпня | +19 | |||
| 11 серпня | +87 | |||
| 10 серпня | +138 | |||
| 09 серпня | 0 | |||
| 08 серпня | +5 | |||
| 07 серпня | +3 | |||
| 06 серпня | +7 | |||
| 05 серпня | +2 | |||
| 04 серпня | +1 | |||
| 03 серпня | +2 | |||
| 02 серпня | +1 | |||
| 01 серпня | 0 |
Дописи каналу
+4
📱 Range API — работа с фрагментами DOM!
В этой шпаргалке собраны основные методы Range API для программной работы с диапазонами и фрагментами DOM. Здесь показано, как задавать начальную и конечную границы диапазона, выбирать узел целиком или только его содержимое, копировать и извлекать выбранные фрагменты, вставлять новые DOM-узлы в заданную позицию, а также получать текстовое содержимое диапазона.
📣 Code Ready | #шпора| 2 |  👩💻 Выделяем элементы в фокусе и их родителей!
Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе. Срабатывает, когда фокус получает сам элемент или любой из его потомков. Например, можно изменить оформление всей формы, когда пользователь перешёл в одно из её полей.
Примеры использования:
• подсветить контейнер с <input> при вводе;
• изменить рамку всей формы;
• выделить пункт меню при фокусе на вложенной ссылке;
• показать дополнительные элементы управления.
В отличие от :focus, который реагирует только на фокус самого элемента, :focus-within учитывает фокус и на всех элементах внутри него.
📣 Code Ready | #свойство | 1 066 |
| 3 | Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!
Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.
HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:
<dialog id="confirmDialog">
<p>Удалить запись?</p>
<button value="cancel">
Отмена
</button>
<button value="confirm">
Удалить
</button>
</dialog>
После получения ссылки на элемент становится доступен полный API HTMLDialogElement:
const dialog = document.querySelector(
'#confirmDialog'
);
У элемента есть два принципиально разных режима открытия.show() переводит <dialog> в состояние отображения без модального поведения:
dialog.show();
Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.
showModal() создаёт настоящий modal dialog:
dialog.showModal();
В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.
Это отличается от обычного display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:
dialog.close();
При необходимости можно передать результат завершения операции:
dialog.close('confirmed');
console.log(
dialog.returnValue
);
returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.
Для форм внутри <dialog> существует специальный механизм method="dialog":
<form method="dialog">
<button value="cancel">
Отмена
</button>
<button value="confirm">
Подтвердить
</button>
</form>
При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в returnValue. Состояние элемента доступно через стандартное свойство:
console.log(
dialog.open
);
Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);
Попытка закрытия через Escape вызывает событие cancel:
dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);
Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.
Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
Главное преимущество <dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.
🔥 Для стандартных модальных сценариев HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.
📣 Code Ready | #практика | 929 |
| 4 |  Если вы уже используете ChatGPT, Claude или Cursor в разработке, но всё равно большую часть работы делаете руками — вы используете ИИ далеко не на максимум.
25 августа Хекслет проведёт бесплатный воркшоп, где покажут, как встроить AI-агента непосредственно в процесс разработки.
За 2 часа на реальном репозитории:
— настроите контекст проекта и AGENTS.md;
— дадите агенту задачу от issue до готового кода;
— подключите тесты и CI;
— автоматизируете code review;
— подключите RAG и MCP для работы с документацией, тикетами и API.
В результате — не набор промптов, а готовый процесс работы с AI-агентом.
25 августа, 19:00
Бесплатно.
👉 Записаться на вебинар
#реклама
О рекламодателе | 917 |
| 5 |  👩💻 Нативный раскрывающийся блок с контентом без JavaScript!
Теги <details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML.
Каждый из тегов выполняет свою роль:
• <details> — содержит скрываемый и раскрываемый контент;
• <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока.
По умолчанию содержимое <details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране.
При этом базовое раскрытие и сворачивание работает без единой строки JS.
📣 Code Ready | #атрибут | 1 163 |
| 6 |  Получаем порядковый номер элемента прямо в CSS!
Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать :nth-child() для каждого элемента.
<div style={{ "--i": index }} />
В CSS появились функции sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество.
Поэтому задержку от 0ms можно вычислить автоматически:
.item {
animation-delay: calc((sibling-index() - 1) * 80ms);
}
Добавили десятый элемент — ничего менять не нужно. Его индекс вычислится из DOM автоматически.
Общее количество элементов тоже доступно прямо в выражении:
.item {
--total: sibling-count();
}
Это можно использовать для stagger-анимаций, распределения элементов и вычислений, которые раньше требовали --i, :nth-child() или генерации CSS из JavaScript.
🔥 Функции учитывают все соседние элементы одного родителя, а не только элементы с классом .item. Поддержка пока ограничена, поэтому перед использованием нужно проверить целевые браузеры.
📣 Code Ready | #совет | 1 370 |
| 7 |  Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security | 1 064 |
| 8 |  🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 350 |
| 9 | Element.toggleAttribute() — нативное переключение DOM-атрибутов!
В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов: disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.
До появления toggleAttribute() подобные операции обычно реализовывались через отдельную проверку наличия атрибута и последующее добавление либо удаление:
const button = document.querySelector('button');
if (button.hasAttribute('disabled')) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
Element.toggleAttribute() объединяет эту логику в один вызов. Метод проверяет текущее состояние атрибута и выполняет противоположное действие.
button.toggleAttribute('disabled');
Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.
Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.
<button disabled>
Submit
</button>
а также
<button disabled="">
Submit
</button>
имеют одинаковое поведение.
Метод возвращает boolean, отражающий состояние атрибута после выполнения операции:
const isDisabled = button.toggleAttribute('disabled');
console.log(isDisabled); // true
Дополнительно toggleAttribute() поддерживает второй аргумент force, который позволяет явно задать требуемое состояние вместо переключения.
button.toggleAttribute('disabled', true); // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут
Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:
input.toggleAttribute('required', isRequired);
toggleAttribute() работает с любыми валидными DOM-атрибутами, включая пользовательские флаги состояния компонентов:
const card = document.querySelector('.card');
card.toggleAttribute('data-selected');
После выполнения:
<div class="card" data-selected></div>
На практике метод используется для управления простыми состояниями интерфейса: переключение видимости элементов, изменение доступности контролов, управление режимами компонентов и другие сценарии, где состояние выражается наличием атрибута.
Например, управление видимостью через стандартный атрибут hidden:
const block = document.querySelector('.details');
block.toggleAttribute('hidden');
🔥 Element.toggleAttribute() определён в DOM Standard и предоставляет единый API для добавления и удаления атрибутов без необходимости вручную комбинировать hasAttribute(), setAttribute() и removeAttribute(). Полезный метод, который делает работу с DOM-состояниями более лаконичной и предсказуемой. Поддерживается всеми современными браузерами.
📣 Code Ready | #практика | 1 224 |
| 10 | Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться;
• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит;
• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки;
• статус-страница на отдельном хостинге/CDN.
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready | 1 347 |
| 11 |  Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;
• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;
• Рассказывается, как построить и отладить автоматический конвейер наполнения, который после настройки генерирует около 14 000 страниц в неделю;
🔊 Продолжайте читать на Habr!
📣 Code Ready | #статья | 1 378 |
| 12 | innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!
DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.
const text = element.textContent;
innerText работает иначе. Чтобы вернуть текст в том виде, в котором его видит пользователь, браузеру необходимо учитывать CSS, видимость элементов, переносы строк и актуальное состояние компоновки.
const text = element.innerText;
Именно поэтому простое чтение свойства иногда может быть дорогой операцией:
element.style.width = '400px';
const text = element.innerText;
После изменения стиля браузер помечает компоновку как устаревшую. Если следующая операция требует данных о визуальном состоянии страницы, браузеру может потребоваться немедленно выполнить перерасчёт. Это называется принудительным синхронным перерасчётом layout.
Похожий механизм работает с другими свойствами, зависящими от текущей геометрии страницы:
element.style.width = '400px';
const width = element.offsetWidth;
К этой же категории относятся offsetHeight, getBoundingClientRect() и чтение некоторых свойств прокрутки (scrollTop, scrollHeight и другие).
Проблема обычно появляется не из-за одного вызова, а из-за постоянного смешивания операций записи и чтения:
elements.forEach(element => {
element.style.width = '400px';
console.log(element.innerText);
});
В таком случае браузер может постоянно выполнять цикл: запись — устаревшая компоновка — чтение — расчёт компоновки.
Это приводит к частым лишним перерасчётам компоновки (layout thrashing). Гораздо эффективнее разделять изменение состояния и чтение данных:
elements.forEach(element => {
element.style.width = '400px';
});
const values = elements.map(
element => element.innerText
);
Важно понимать: innerText не является медленным сам по себе. Если состояние компоновки уже актуально, чтение может быть дешёвым. Проблема возникает тогда, когда браузеру приходится синхронизировать DOM с текущим визуальным состоянием страницы.
Если нужно получить данные из DOM, обычно достаточно textContent. Если нужен текст именно в том виде, в котором его воспринимает пользователь, используется innerText.
🔥 Разница между ними не только в возвращаемой строке. textContent работает с моделью документа, а innerText — с моделью отображения. В производительных интерфейсах это различие может определить, будет ли чтение обычным получением текстового содержимого или причиной перерасчёта компоновки.
📣 Code Ready | #практика | 1 310 |
| 13 |  40 собесов и оффер за 1 месяц
Алексей разработчик.
Искал работу с декабря - написание сопроводов и отклики занимали очень много времени.
Выхлоп - почти нулевой.
В какой-то момент понял:
так можно искать бесконечно.
И по совету друга попробовал ии-ассистента для автооткликов - Софи.
▫️За ~1 месяц прошел около 40 собеседований
▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам
В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.
Весь процесс - от первого собеседования до оффера - занял 4 дня.
Зарегистрироваться и попробовать Софи можно здесь.
3 дня - бесплатно. | 1 116 |
| 14 |  👩💻 Связываем подпись с полем формы с помощью атрибута for!
Атрибут for используется у тега <label> и указывает, к какому элементу формы относится подпись.
А ещё не каждый элемент подойдёт для связи, годятся только из категории «связываемых»:
• <button>;
• <input>;
• <meter>;
• <progress>;
• <select>;
• <textarea>;
• И даже сам <output>.
Кроме удобства, правильная связка <label for="..."> улучшает доступность формы, поскольку вспомогательные технологии могут определить, какая подпись относится к конкретному полю.
📣 Code Ready | #атрибут | 1 374 |
| 15 |  +4📱 Intersection Observer API — отслеживание видимости элементов!
В этой шпаргалке собраны основные методы и свойства Intersection Observer API для асинхронного отслеживания пересечения элементов с viewport или заданным root. Здесь показано, как подключать и отключать наблюдение, определять факт и степень пересечения, получать геометрию элемента, области пересечения и root, а также применять observer для lazy loading, аналитики и UI-эффектов.
📣 Code Ready | #шпора | 1 841 |
| 16 |  Храним собственные данные прямо в HTML с помощью data-*!
Дата-атрибут — это пользовательский атрибут на HTML-элементе, название которого начинается с data-. Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JS при помощи собственного API.
После data- указывается произвольное имя, описывающее значение:
• data-id — идентификатор объекта;
• data-theme — тема оформления;
• data-status — состояние элемента;
• data-user-id — идентификатор пользователя.
data-* полезен, когда элементу нужно передать дополнительные данные для поведения интерфейса, не отображая их пользователю.
📣 Code Ready | #атрибут | 1 828 |
| 17 |  ✍️ React от нуля до архитектора — большое руководство по React-разработке!
Материал начинается с основ JavaScript и постепенно переходит к компонентам, JSX, хукам, формам и роутингу. Дальше разбираются TanStack Query, Redux Toolkit и Zustand, TypeScript, тестирование, безопасность, оптимизация производительности, архитектурные паттерны, Next.js, SSR и React Server Components. Получается полноценный маршрут от основ React до разработки и архитектуры крупных приложений.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 2 064 |
| 18 | TreeWalker — последовательный обход DOM без создания промежуточной коллекции!
При обходе DOM часто используют рекурсию или querySelectorAll(). Это рабочие подходы, но они подходят не для всех задач: рекурсивный обход требует дополнительной логики, а querySelectorAll() сразу формирует статический NodeList со всеми найденными элементами.
DOM API предоставляет интерфейс TreeWalker, который позволяет последовательно обходить дерево документа и получать только нужные узлы по мере обхода. Например, создадим объект для обхода элементов:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);
let node;
while ((node = walker.nextNode())) {
console.log(node.tagName);
}
}
Обход начинается с потомков переданного корневого узла, поэтому сам document.body в цикл не попадёт.
TreeWalker поддерживает фильтрацию узлов. Например, можно возвращать только кнопки во время обхода дерева:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{
acceptNode(node) {
return node.tagName === 'BUTTON'
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_SKIP;
}
}
);
let node;
while ((node = walker.nextNode())) {
console.log(node);
}
}
Фильтр вызывается для узлов во время обхода, поэтому отдельная коллекция найденных элементов не создаётся.
FILTER_SKIP пропускает текущий узел, но продолжает обход его потомков. Если необходимо исключить всё поддерево целиком, используется FILTER_REJECT. TreeWalker также поддерживает навигацию в разных направлениях:
walker.parentNode();
walker.firstChild();
walker.lastChild();
walker.previousSibling();
walker.nextSibling();
walker.previousNode();
walker.nextNode();
Например, можно найти первый элемент с атрибутом data-error и сразу прокрутить страницу к нему:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);
let node;
while ((node = walker.nextNode())) {
if (node.hasAttribute('data-error')) {
node.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
break;
}
}
}
В отличие от querySelectorAll(), TreeWalker не создаёт промежуточную коллекцию найденных элементов, а возвращает узлы по мере обхода дерева.
При этом TreeWalker не обязательно будет быстрее querySelectorAll() в каждом конкретном случае. Выбор зависит от задачи: для простого поиска по CSS-селектору обычно удобнее querySelector() или querySelectorAll(), а для управляемого последовательного обхода дерева — TreeWalker.
🔥 TreeWalker определён в DOM Standard и предоставляет низкоуровневый механизм навигации по DOM с возможностью фильтрации узлов во время обхода. Он подходит для реализации редакторов, инструментов анализа DOM и библиотек, которым требуется последовательный обход дерева с полным контролем над процессом навигации.
📣 Code Ready | #практика | 1 872 |
| 19 |  Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Без опыта сделаешь реальный сайт сервиса доставки с нуля;
2. Добавишь JavaScript-логику, расчёты и трекинг;
3. Подключишь карты и маршрут доставки через API;
4. Превратишь сайт в Angular-приложение;
5. Подключишь backend и выложишь проект в продакшен;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием. | 1 148 |
| 20 |  😎 FrontSkill Docs — большая база знаний по Frontend-разработке!
Это онлайн-справочник, где собраны материалы по Frontend: HTML, CSS, JavaScript, TypeScript, React и другим технологиям. Документация построена по темам, что позволяет последовательно изучать материал или быстро находить нужную информацию во время разработки.
📌 Оставляю ссылочку: frontskill.ru
📣 Code Ready | #сайт | 1 758 |
