Вебсправочник
Основы веб-разработки

DOMParser: разбор HTML не равен очистке содержимого

DOMParser может разобрать HTML-строку в отдельный документ для чтения структуры. Однако результат разбора нельзя считать безопасным HTML только потому, что он ещё не вставлен в видимую страницу.

Назначение

DOMParser может разобрать HTML-строку в отдельный документ для чтения структуры. Однако результат разбора нельзя считать безопасным HTML только потому, что он ещё не вставлен в видимую страницу.

Как это работает

В примере используется фиксированная учебная строка без внешних ресурсов. Из полученного документа извлекается только текст заголовка. Код не переносит узлы в текущую страницу и не запускает обработчики из чужой разметки.

Пример

const parser = new DOMParser();
const parsed = parser.parseFromString("<h2>Учебная <em>заметка</em></h2>", "text/html");
const heading = parsed.querySelector("h2");
console.log(heading ? heading.textContent : "Заголовок отсутствует");

Что должно получиться

Консоль показывает обычный текст заголовка, включая текст вложенного em. Разбор помогает выбрать нужный элемент, но не подтверждает происхождение и допустимость исходной строки.

Граница применения и частая ошибка

Не вставляйте непроверенные узлы или innerHTML из полученного документа в рабочую страницу. Обработчики событий и опасные адреса могут стать активными при последующем использовании; отдельные ресурсы способны загружаться и при разборе. При политике Trusted Types строковый ввод может быть ограничен.

Самостоятельная проверка

Измените фиксированную строку так, чтобы заголовка не было, и проверьте ветку отказа. Если нужен только текстовый вывод, используйте textContent. Для разрешённого форматированного пользовательского HTML выбирайте проверенный очиститель с явной политикой, а не самодельную замену нескольких тегов.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.