DOMParser

Парсинг XML/HTML-строки в Document без подключения к DOM.

Что это

Класс DOMParser (всегда был в браузере, теперь и в Node 22+ через globalThis). Превращает строку в Document, по которому можно ходить querySelector'ами. Главные применения: парсинг RSS/Atom XML-фидов, sanitize HTML-фрагментов из API, преобразование SVG-строк в элементы.

Базовое использование

const parser = new DOMParser();

// XML — RSS-фид подкаста
const res = await fetch('https://feeds.example.com/podcast.rss');
const xmlText = await res.text();
const doc = parser.parseFromString(xmlText, 'application/xml');

// Извлекаем эпизоды
const items = doc.querySelectorAll('item');
const episodes = [...items].map((item) => ({
  title: item.querySelector('title')?.textContent,
  audioUrl: item.querySelector('enclosure')?.getAttribute('url'),
  pubDate: item.querySelector('pubDate')?.textContent,
  duration: item.querySelector('itunes\\:duration')?.textContent,
  // или через getElementsByTagNameNS для namespace
}));

// HTML
const htmlDoc = parser.parseFromString('<p>hi</p>', 'text/html');
const p = htmlDoc.body.firstChild;

MIME types

Тип Когда
text/html HTML-фрагмент, в Document с <html><body>...
application/xml XML общего вида (RSS, SVG, custom)
text/xml Синоним application/xml
image/svg+xml SVG
application/xhtml+xml XHTML

Поддержка

Все браузеры. Node.js 22+ имеет глобальный DOMParser (в JSDOM раньше — new JSDOM(...).window.document).

Подводные камни

  • При XML-режиме ошибки парсинга НЕ кидают exception — нужно проверять doc.querySelector('parsererror')
  • Namespace-префиксы в querySelector экранируются: 'itunes\\:duration' (или getElementsByTagNameNS)
  • HTML-режим всегда оборачивает в <html><head><body> — не удивляйся
  • Не выполняет <script> и не делает запросы за <img src> (sandbox-like)
  • CORS: фид с другого домена потребует Access-Control-Allow-Origin — иначе придётся через прокси

Используется в bootcamp

  • Podcast Player — парсинг RSS-фида подкаста (XML с эпизодами, <item>, <enclosure>, itunes:*)

Ссылки

См. также