JavaScript DOMParser — розбір HTML-рядка в DOM

DOMParser перетворює рядок з HTML або XML на повноцінний документ, по якому можна ходити звичайними селекторами.

правити

Загальний опис

Типовий випадок — сервер віддав шматок розмітки, і з нього треба дістати дані, а не вставити його на сторінку.

Звабливо кинути рядок в innerHTML тимчасового <div> — але так браузер почне вантажити ресурси: зображення, іконки, а в деяких випадках виконає обробники з атрибутів. Для чужої розмітки це відверто небезпечно.

DOMParser розбирає рядок у окремий, мертвий документ: нічого не вантажиться, нічого не виконується. Далі — querySelector як завжди.

Він же читає XML і RSS — другим аргументом передається тип.

правити

Нотатка

Скрипти в розібраному документі не виконуються, але це не робить розмітку безпечною для вставки. Якщо ти потім кладеш її в сторінку — санітизація все одно потрібна.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const doc = new DOMParser().parseFromString(html, "text/html");

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
DOMParser	1+	1+	1+	8+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
DOMParser	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

const html = '<h1>Заголовок</h1><a href="/css">посилання</a>';
const doc = new DOMParser().parseFromString(html, 'text/html');

// звичайні селектори по окремому, «мертвому» документу
console.log(doc.querySelector('h1').textContent);
console.log([...doc.querySelectorAll('a')].map(a => a.getAttribute('href')));

// XML і RSS — так само
const xml = new DOMParser().parseFromString(
    '<rss><item><title>Новина</title></item></rss>',
    'text/xml'
);

console.log(xml.querySelector('title').textContent); // 'Новина'