Как получить DOM страницы по url

Question

из расширения Crome пытаюсь получить DOM-структуру страницы по ссылке. Использую такой код:

            var doc = document.body;
            fetch(order_data['skuhref']).then(function(response) { 
                response.text().then(function(text) {
                    doc.textContent = text;
                });
            });

В этой переменной order_data['skuhref'] находится url.

Скрипт возвращает страницу в виде html текста. А как получить страницу в виде DOM, чтобы удобно можно было обращаться к нужным элементам?

Answer 1

Если речь идет про браузер, то в браузере уже есть DOM:

const dom = window.document;

Answer 2

Как вариант, можно создать div элемент и в innerHTML положить полученный html.


var doc = document.body;
fetch(order_data['skuhref']).then(function(response) { 
    response.text().then(function(text) {
        doc.textContent = text;

        let dom = document.createElement('div');
        dom.innerHTML = text;

        // теперь можно пользоваться селекторами как обычно
        console.log(dom.querySelector('h1'));
    });
});

Answer 3

По совету Grundy сделал вот так:

fetch(order_data['skuhref']).then(function(response) { 
            response.text().then(function(text) {               
                var parser = new DOMParser(); 
                var sku_document = parser.parseFromString(text, "text/html");   
                ........                    
            });
        });

Просто, красиво и работает!

БЛОГ НА HUSL

Как получить DOM страницы по url

Ответы (3 шт):