Практика: DOM

Введение

Урок закрепляет работу с DOM: выбор и изменение элементов, создание и удаление. Комбинируем с циклами и условиями и массивами. Подготовка к проекту «Веб-квиз».

Задачи

• Строить DOM из массива данных (списки, карточки).
• Реализовать счётчик с кнопками и выводом в страницу.
• Управлять видимостью блоков (показать/скрыть).
• Сделать простой табулятор (переключение блоков по кнопкам).

Практика

1. Динамический список из массива.
2. Счётчик: кнопки «+1» и «-1», вывод в div.
3. Переключение видимости блока по кнопке.
4. Простой табулятор: 3 кнопки, 3 блока, показывается только один.

Подведём итоги

Закрепили работу с DOM. На следующем уроке — проект «Веб-квиз».

Типичные ошибки

• Обновлять DOM в цикле без innerHTML = "" или replaceChildren() — старый контент останется.
• Пропускать проверку существования элемента перед обращением к нему — результат станет непредсказуемым.
• Создавать лишние узлы при каждом обновлении — лучше обновлять textContent существующих.
• Путать childNodes и children — второе только элементы, без текстовых узлов.

Домашнее задание

Упражнение №1

Счётчик: число в div, кнопки «+1» и «-1». Значение не ниже 0.

Упражнение №2

Массив из 5 строк. При загрузке страницы создай список из этих строк в указанном div.

Упражнение №3

Три вкладки (кнопки). Три блока контента. По клику на вкладку — показывается только соответствующий блок. Остальные скрыты (display: none).

Упражнение №4

Темы: светлая/тёмная. Кнопка переключает класс на body. В CSS задай стили для .dark (тёмный фон, светлый текст).

Упражнение №5

Список с кнопкой «Сортировать». По клику сортируй пункты по алфавиту и обновляй DOM.