Всем привет! Сегодня мы рассмотрим интересный интерфейс DOMParser который позволяет данные из текстового формата преобразовывать в формат text/html, application/xml, image/svg+xml. Итак, поехали!

Допустим у нас есть обычная строка в формате text/plain, то есть обычный текст.

var str = "<div><p>Привет мир!</p></div>";

И мы хотим преобразовать ее в формат text/html. Для этого нам понадобится воспользоваться интерфейсом DOMParser.

var str  = "<div><p>Привет мир!</p></div>";
var parser = new DOMParser();
var doc = parser.parseFromString(str , "text/html");
console.log(doc);

Как видите для того чтобы начать работать с интерфейсом DOMParser, необходимо создать его объект. И далее воспользоваться методом parseFromString() который принимает в себя несколько параметров. Первый параметр - строка, которую мы хотим преобразовать, а второй параметр - это формат в который преобразуется строка.

Всего форматов в которые мы можем преобразовать строку три:

text/html

application/xml

image/svg+xml

В результате на выходе мы получаем объект документ содержащий нашу строку формате text/html. И теперь мы можем используя модель DOM работать с нашей строкой.

console.log(doc.querySelector('div'));

Здесь мы получим наш элемент div.

console.log(doc.querySelector('p').innerHTML);

А здесь строку содержащуюся в элементе p.

Как вы наверное уже догадались данный интерфейс может быть очень полезен при парсинге данных.

Пример:

fetch('https://webfanat.com/login/').then(function(response) {
        if(response.status === 200){
            return response.text();
        }else{
            console.log('Подключения к сети нет ');
        }
    }).then(function(result) {
		var parser = new DOMParser();
		var doc = parser.parseFromString(result, "text/html");
		console.log(doc.querySelector('h1').innerHTML);
    });

В данном примере я вывел в консоль содержимое тега h1 со страницы находящейся по адресу https://webfanat.com/login/. Не забывайте про кросс доменные ограничения. Данный запрос я осуществлял со страницы https://webfanat.com.

Работа с форматами application/xml и image/svg+xml осуществляется по такому же принципу. Только помните что для успешного преобразования содержимое строки по структуре должно соответствовать формату в который оно будет преобразовано.

На этом данная статья подошла к концу. Всем спасибо за внимание.

Если остались вопросы, пишите их в комментариях или в группе

вк.

Я с вами прощаюсь. Желаю успехов и удачи! Пока.