DOM в JavaScript: поиск элементов, события и изменение страницы

DOM (Document Object Model) — объектное представление HTML. JS находит узлы, меняет содержимое и стили через классы, реагирует на клики и ввод.

Поиск и изменение

querySelector/querySelectorAll — основной способ. Для текста безопаснее textContent, чем склейка HTML-строк (чтобы не открыть XSS). Классы переключайте через classList.

События

addEventListener подписывает обработчик. Не забывайте про доступность: действия должны работать и с клавиатуры там, где это интерактив.

Итог курса

Соберём всё вместе в первом сайте.

HTML

<div class="widget">
  <p class="widget__status">Тема: светлая</p>
  <button id="theme-btn" type="button">Переключить тему</button>
</div>

CSS

body.is-dark {
  background: #102a43;
  color: #f0f4f8;
}
.widget {
  padding: 1rem;
  border: 1px solid #829ab1;
}

JavaScript

const btn = document.querySelector('#theme-btn');
const status = document.querySelector('.widget__status');

btn.addEventListener('click', () => {
  const dark = document.body.classList.toggle('is-dark');
  status.textContent = dark ? 'Тема: тёмная' : 'Тема: светлая';
});

Практическое задание

Задание: сделайте переключатель состояния интерфейса через DOM.

  • Использованы querySelector и classList.toggle
  • Текст статуса меняется вместе с состоянием
  • Стили состояния описаны CSS-классом, не element.style для всего
  • Обработчик через addEventListener