Курс на Stepik
Обложка курса «DOM без хаоса: системная база для React, Vue и Angular» на Stepik
777 ₽

DOM без хаоса: системная база для React, Vue и Angular ★ 0.000

Открыть на
STEPIK.ORG

Хочешь уверенно работать с React, Vue, Angular — начни с DOM. Этот курс показывает, как браузер превращает HTML в DOM‑дерево, из каких объектов состоит страница и как управлять ими через JavaScript. Ты научишься создавать динамичные интерфейсы, понимать поведение элементов и событий, избавляться от хаоса в коде и закладывать фундамент, без которого современные фреймворки не раскрываются.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «DOM без хаоса: системная база для React, Vue и Angular»Учеников на курсе 21
Сертификаты, выданные на курсе «DOM без хаоса: системная база для React, Vue и Angular»Сертификатов выдано 1
Отзывы о курсе «DOM без хаоса: системная база для React, Vue и Angular»Отзывов получено 0
Рейтинг курса «DOM без хаоса: системная база для React, Vue и Angular»Рейтинг курса 0.000
Уроки в курсе «DOM без хаоса: системная база для React, Vue и Angular»Количество уроков 126
Тесты в курсе «DOM без хаоса: системная база для React, Vue и Angular»Количество квизов 45
Время прохождения курса «DOM без хаоса: системная база для React, Vue и Angular»Время прохождения курса —
Стоимость курса «DOM без хаоса: системная база для React, Vue и Angular»Стоимость курса 777 ₽ —
Обновления курса «DOM без хаоса: системная база для React, Vue и Angular»Обновления курса — —
Дата публикации курса «DOM без хаоса: системная база для React, Vue и Angular»Дата публикации курса — ———
Последнее обновление курса «DOM без хаоса: системная база для React, Vue и Angular»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «DOM без хаоса: системная база для React, Vue и Angular» 24 раздела Уроки в курсе «DOM без хаоса: системная база для React, Vue и Angular» 126 уроков Тесты в курсе «DOM без хаоса: системная база для React, Vue и Angular» 45 тестов Время прохождения курса «DOM без хаоса: системная база для React, Vue и Angular» 1 ч. Последнее обновление курса «DOM без хаоса: системная база для React, Vue и Angular» обн. 11 июля 2026

Начало

4 урока
1. Вступление ↗
2. Кому будет полезен этот курс и зачем понимать DOM ↗
3. Темы которые нужно понимать перед прохождения курса ↗
4. Подготовка перед прохождением курса ↗

Фундамент DOM

7 уроков
1. Содержание модуля ↗
2. Что такое DOM, Document и разница между HTML и DOM ↗
3. Узлы (Node) — основные типы ↗
4. DOM‑дерево: отношения между узлами ↗
5. Живое vs статическое поведение коллекций ↗
6. Тесты ↗
7. Практика ↗

Архитектура браузера и Web API

1 урок
1. DOM и Web API — как устроена архитектура браузера ↗

Базовые фундаментальные интерфейсы

4 урока
1. Все интерфейсы DOM — обзор ↗
2. EventTarget — основа событийной модели браузера ↗
3. Window — глобальный объект браузера ↗
4. Node — базовый интерфейс DOM ↗

Узлы документа

4 урока
1. Document — точка входа в DOM. Предоставляет весь HTML ↗
2. Document — работа с событиями ↗
3. DocumentType — паспорт вашего документа ↗
4. DocumentFragment — невидимый контейнер для быстрой вставки ↗

Элементы

6 уроков
1. Element — каркас любого тега ↗
2. Element — Геометрия, События, Анимация, ARIA ↗
3. HTMLElement — оживший HTML-объект ↗
4. HTML‑элементы. Часть 1 ↗
5. HTML‑элементы. Часть 2 ↗
6. HTMLMediaElement, HTMLAudioElement, HTMLVideoElement ↗

От теории интерфейсов к живому коду

2 урока
1. Практика ↗
2. База есть. Что дальше? ↗

Текстовые узлы

3 урока
1. CharacterData — базовый интерфейс текстовых узлов ↗
2. Text — интерфейс, представляющий текстовый узел ↗
3. Comment — комментарий ↗

Коллекции и списки

2 урока
1. DOMTokenList — упорядоченный набор строк‑токенов ↗
2. NodeList и HTMLCollection — коллекции узлов ↗

Обход DOM

2 урока
1. TreeWalker — ручной обход DOM ↗
2. NodeIterator — простой обход DOM ↗

Выделение и работа с диапазонами

2 урока
1. Range — диапазон в документе ↗
2. Selection — выделение текста ↗

Наблюдение за изменениями

1 урок
1. MutationObserver — отслеживание изменений DOM ↗

Shadow DOM и Web Components

3 урока
1. ShadowRoot — корень теневого DOM ↗
2. HTMLSlotElement — слот для вставки контента ↗
3. CustomElementRegistry — регистрация кастомных элементов ↗

Поиск и навигация

7 уроков
1. Содержание модуля ↗
2. Методы поиска: Где и как искать? ↗
3. Продвинутая проверка и движение «Вверх» ↗
4. Навигация: Как перемещаться без повторного поиска? ↗
5. Коллекции и работа с памятью ↗
6. Тесты ↗
7. Практика ↗

Создание, изменение и удаление элементов

10 уроков
1. Содержание модуля ↗
2. Рождение узлов: Работа в памяти ↗
3. Вставка: Как элементы попадают на страницу ↗
4. Очистка и замена: Современный подход ↗
5. Жизненный цикл: Удаление и Клонирование ↗
6. Оптимизация: DocumentFragment ↗
7. Жизнь после смерти: Утечки памяти и «призраки» ↗
8. Архитектурная заметка: Как это делают фреймворки (Vue/React) ↗
9. Тесты ↗
10. Практика ↗

Работа с содержимым и безопасностью

8 уроков
1. Содержание модуля ↗
2. Трио для работы с контентом: Выбираем оружие ↗
3. Точечная работа: Методы insertAdjacent... ↗
4. XSS (Cross-Site Scripting): Как не подставить проект ↗
5. Защита и «Песочницы» ↗
6. createTextNode — Золотой стандарт ↗
7. Тесты ↗
8. Практика ↗

Атрибуты, свойства, dataset

9 уроков
1. Содержание модуля ↗
2. Атрибуты vs Свойства: Фундаментальная разница ↗
3. Работа с атрибутами: Интерфейс Element ↗
4. DOM-свойства: Быстро и типизировано ↗
5. Dataset: Твой склад данных ↗
6. Стили и Классы: Специализированные интерфейсы ↗
7. Практическая работа: «Управление карточкой товара» ↗
8. Тесты ↗
9. Практика ↗

События — базовый уровень

9 уроков
1. Содержание модуля ↗
2. Способы назначения обработчиков ↗
3. Жизненный цикл подписки: Удаление событий ↗
4. Объект Event: Твои глаза и уши ↗
5. Главные события (Must-know на старте) ↗
6. Управление поведением: preventDefault и stopPropagation ↗
7. Продвинутые опции: once и passive ↗
8. Тесты ↗
9. Практика ↗

События — продвинутый уровень

9 уроков
1. Содержание модуля ↗
2. Путешествие события: Погружение и Всплытие ↗
3. Делегирование событий: target и closest() ↗
4. Pointer Events: Унификация (Mouse + Touch) ↗
5. Опции и современные события ↗
6. Память и производительность ↗
7. Практика: Итоговая таблица выбора ↗
8. Тесты ↗
9. Практика ↗

Современные Browser APIs

9 уроков
1. Содержание модуля ↗
2. Семья Observers: «Глаза» вашего приложения ↗
3. Плавность: requestAnimationFrame (rAF) ↗
4. Работа с URL и навигацией ↗
5. Хранение данных: Хронология и Типы ↗
6. Взаимодействие с системой: Clipboard API ↗
7. Итоговая таблица: Браузер vs Библиотеки ↗
8. Тесты ↗
9. Практика ↗

Работа с БД — продвинутый уровень

4 урока
1. IndexedDB: Тяжелая артиллерия браузера ↗
2. Понятие State (Состояние приложения) ↗
3. Синхронизация БД и Состояния ↗
4. Безопасность и Мета-данные ↗

Мини‑проекты

2 урока
1. Содержание модуля ↗
2. Практика ↗

Архитектура и чистый код

9 уроков
1. Содержание модуля ↗
2. Разделение ответственности (Separation of Concerns) ↗
3. Функции-утилиты: Твой мини-фреймворк ↗
4. Кэширование и оптимизация отрисовки ↗
5. Теги : Разметка отдельно от логики ↗
6. Компонентный подход на Vanilla JS ↗
7. Главные правила «Чистого DOM-кода» ↗
8. Тесты ↗
9. Практика ↗

Интеграция с backend (FastAPI / любой REST)

5 уроков
1. Интеграция с backend (Python + FastAPI) ↗
2. Интеграция с backend (Node.js + Express) ↗
3. Практика ↗
4. Структура курса (потом удалить) ↗
5. Следующий интерфейс ↗