JavaScript | Как получить код HTML-страницы?

Одной командой

new XMLSerializer().serializeToString(document)

Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все веб-ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте клавишу ENTER.

Для тех кто не понял строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция и видео ниже.

Видео инструкция

В этом видео приводится пример преобразования HTML-элемента в строку при помощи JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

 

Задача

У нас открыта вкладка в браузере. В этой вкладке отрисована HTML-страница, которая пришла с сервера.

Нам нужно получить код данной HTML-страницы — разметку. Мы хотим получить разметку в виде СТРОКИ. То есть нам как-то нужно преобразовать объект HTML-элемента в строковый тип данных JavaScript.

 

Немножко теории

«Объектная модель документа» (DOM) преобразовывает СТРОКУ кода c сервера в объект document. Этот объект хранит в себе наборы элементов и их последовательности. Самый правильный сценарий — это сделать GET-запрос на сервер и достать данные при помощи функции fetch(). Но нам нужно понять способ КОНВЕРТАЦИИ из уже готового объекта.

У объекта document есть готовый набор атрибутов, который помогает извлекать данные из страниц. Два атрибута, на которые можно акцентировать внимание — это documentElement и doctype. Но эти данные являются объектами, а не строками.

Объекты - документ, тип документа и элемент документа - JavaScript
Объекты — документ, тип документа и элемент документа — JavaScript

В данной задаче извлекать их по отдельности не имеет смысла. Просто вы должны понимать структуру объекта document. Внутри объекта тоже объекты, а не строки.

Решение

Нам нужно использовать интерфейс XMLSerializer, который имеет один единственный метод serializeToString(). Этот метод вернёт нам СТРОКУ из ОБЪЕКТА.

Сперва нам нужно создать новый конструктор сериализатора разметки:

var a = new XMLSerializer()
new XMLSerializer() - JavaScript
new XMLSerializer() — JavaScript

 

Теперь мы можем вызвать метод serializeToString() и передать в него наш объект document.

a.serializeToString(document)
Объект документа стал строкой - JavaScript
Объект документа стал строкой — JavaScript

На выходе мы получаем СТРОКУ с HTML-разметкой. Тип данных STRING. Даже консоль браузера нам подсвечивает её красно-коричневым цветом.

typeof(new XMLSerializer().serializeToString(document))
"string"
Тип данных string - возвращает new XMLSerializer() - JavaScript
Тип данных string — возвращает new XMLSerializer() — JavaScript

 

Можно без объявления лишних переменных сразу получить строку с HTML-разметкой

new XMLSerializer().serializeToString(document)

 

Итог

Мы выполнили задачу и получили весь код HTML-страницы.

Информационные ссылки

Стандарт DOMhttps://dom.spec.whatwg.org/

Стандарт DOM Parsing and Serializationhttps://www.w3.org/TR/DOM-Parsing/

DOM

 

Поделись записью