JavaScript DOMParser — розбір HTML-рядка в DOM
DOMParser перетворює рядок з HTML або XML на повноцінний документ, по якому можна ходити звичайними селекторами.
Загальний опис
Типовий випадок — сервер віддав шматок розмітки, і з нього треба дістати дані, а не вставити його на сторінку.
Звабливо кинути рядок в innerHTML тимчасового <div> — але так браузер почне вантажити ресурси: зображення, іконки, а в деяких випадках виконає обробники з атрибутів. Для чужої розмітки це відверто небезпечно.
DOMParser розбирає рядок у окремий, мертвий документ: нічого не вантажиться, нічого не виконується. Далі — querySelector як завжди.
Він же читає XML і RSS — другим аргументом передається тип.
автор: NagarD
- Нотатка
-
Скрипти в розібраному документі не виконуються, але це не робить розмітку безпечною для вставки. Якщо ти потім кладеш її в сторінку — санітизація все одно потрібна.
автор: NagarD
Синтаксис
const doc = new DOMParser().parseFromString(html, "text/html");методи
| Метод | Опис |
|---|---|
| parseFromString | Створює Document із рядка розмітки. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1.3 | 8 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Дістати дані з чужої розмітки, нічого не завантажуючи.
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); // 'Новина'Коментарі
Коментарів ще немає — будьте першим!