DOM API и работа с событиями

DOM API позволяет JavaScript находить, создавать и изменять элементы на странице. События позволяют реагировать на действия пользователя — клики, ввод текста, отправку форм.

Почему это важно: Когда бэкенд возвращает HTML-фрагмент или JSON, фронтенд использует DOM API чтобы вставить данные на страницу. Понимание этого механизма помогает проектировать ответы сервера и отлаживать проблемы с интерактивностью.

Главная идея

DOM — дерево объектов, где каждый HTML-тег становится узлом. JavaScript может traversить это дерево, менять содержимое узлов и подписываться на события.

Как это выглядит на практике

Пользователь вводит текст в поле поиска
Событие 'input' срабатывает на элементе
Обработчик события вызывает fetch к /api/search?q=...
Сервер возвращает JSON с результатами
JavaScript очищает контейнер результатов через innerHTML = ''
Для каждого результата createElement создаёт новый DOM-элемент
Элементы добавляются в контейнер через appendChild

Примеры кода

Поиск и изменение элементов

// Поиск элементов
const title = document.getElementById('page-title');
const cards = document.querySelectorAll('.card');
const form = document.querySelector('form[data-action="search"]');

// Изменение содержимого
title.textContent = 'Новый заголовок';      // безопасно, экранирует HTML
title.innerHTML = '<em>Курсив</em>';        // парсит HTML — осторожно с XSS!

// Изменение атрибутов и классов
form.setAttribute('action', '/api/v2/search');
title.classList.add('highlighted');
title.classList.toggle('hidden');

Обработка событий формы

const form = document.querySelector('#login-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault(); // не даём браузеру перезагрузить страницу

  const formData = new FormData(form);
  const response = await fetch(form.action, {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    window.location.href = '/dashboard';
  } else {
    const error = await response.json();
    document.getElementById('error-msg').textContent = error.message;
  }
});

Что происходит под капотом

querySelectorAll возвращает статический NodeList — новые элементы в него не попадут автоматически
textContent безопасен от XSS, innerHTML — нет, т.к. парсит переданную строку как HTML
event.preventDefault() отменяет поведение по умолчанию (отправка формы, переход по ссылке)
FormData автоматически собирает все поля формы с атрибутом name
Событие всплывает (bubbling): click на кнопке сработает и на её родителях

Типичные ошибки и заблуждения

«innerHTML безопасен» — нет, если вставлять пользовательский ввод напрямую, это вектор XSS-атаки
«DOM-манипуляции медленные» — одиночные операции быстры, медленным становится массовое изменение DOM в цикле без батчинга
«addEventListener заменяет onclick» — addEventListener позволяет добавить несколько обработчиков, onclick — только один

Ключевые выводы

querySelector/querySelectorAll — основные методы поиска элементов в DOM
textContent для безопасной вставки текста, innerHTML — только для доверенного контента
event.preventDefault() — критичен для перехвата отправки форм и создания SPA-подобного поведения

Термины урока

{:term=>"Event bubbling", :definition=>"Механизм, при котором событие сначала срабатывает на целевом элементе, затем поднимается к его родителям"}

{:term=>"FormData", :definition=>"Объект, автоматически собирающий данные всех полей формы для отправки на сервер"}

{:term=>"XSS", :definition=>"Cross-Site Scripting — атака, при которой злоумышленник внедряет JavaScript-код через пользовательский ввод"}

Связь с работой backend-разработчика

Понимание DOM API объясняет, почему фронтенд просит определённый формат ответа. Если API возвращает HTML-фрагмент — фронтенд вставит его через innerHTML. Если JSON — создаст элементы через DOM API. Это влияет на дизайн ваших endpoint'ов.

Мини-разбор реальной ситуации

В приложении появились XSS-уязвимости: фронтенд вставлял комментарии пользователей через innerHTML. Злоумышленник отправил комментарий с тегом . Решение: на бэкенде — экранирование HTML при сохранении, на фронтенде — замена innerHTML на textContent для пользовательского контента.</p> </blockquote> <div class="takeaway-box"> <h3>Что запомнить</h3> <ul class="feature-list"> <li>textContent — безопасная вставка текста, innerHTML — только для доверенного HTML</li> <li>event.preventDefault() перехватывает отправку форм для AJAX-обработки</li> <li>FormData автоматически собирает все поля формы с name</li> </ul> </div> <div class="wrapup-box"> <h3>Итог</h3> <p>DOM API — интерфейс JavaScript для управления страницей. Для бэкенд-разработчика ключевые знания: как фронтенд ищет элементы, как обрабатывает события форм и почему важно экранировать пользовательский ввод и на сервере, и на клиенте.</p> </div>