Как сохранить весь HTML DOM в его текущем состоянии

Что такое Document Object Model (DOM)?

Содержимое веб-страницы состоит из HTML кода, полученного от веб-сервера. Но современные технологии (HTML 5 и JavaScript) позволяют менять содержимое веб-страницы на лету: JavaScript может добавить новые элементы, изменить свойства имеющихся элементов, удалить элементы и выполнять самые разнообразные действия с ними. JavaScript может просто очистить весь полученный от веб-сервера HTML код и создать совершенно иную страницу.

HTML DOM (Document Object Model) это содержимое веб-страницы в текущий момент, после того, как JavaScript добавил, удалил или изменил элементы.

То есть при загрузки веб-страницы её DOM соответствует HTML коду полученному от серверу. В дальнейшем DOM может не меняться (для статических страниц), либо очень сильно меняться под воздействием JavaScript.

Возможно, вы уже обращали внимание, что для некоторых сайтов сохранённая веб-страница выглядит совершенно иначе, чем то, что вы видели у себя на экране. Это происходит по той причине, что выполняя операцию «Сохранить как» вы сохраняете HTML, который прислал сервер, но не сохраняете текущий DOM.

В вещественном смысле DOM представляет собой HTML, который формирует текущую версию веб-страницы.

Как увидеть DOM

Чтобы увидеть DOM в Chrome, нажмите F12 и перейдите во вкладку Elements.

Там вы увидите HTML код — это и есть DOM в текущем состоянии. Вы можете выполнять разные действия, вызывающие изменения на веб-странице и все эти изменения сразу же будут менять DOM — вы можете заметить, как меняется HTML код.

Вы можете вручную редактировать DOM (например, удалить некоторые элементы) и это сразу же скажется на содержимом веб-страницы.

В Firefox для просмотра DOM нажмите F12 и перейдите во вкладку Inspector. В Firefox вы можете выполнять аналогичные действия с изменением DOM или наблюдать за его изменением при изменении веб-страницы.

Как сохранить DOM

Итак, как же сохранить DOM веб-страницы в текущем состоянии?

Во-первых, как уже было сказано, операция «Сохранить как» сохранит только исходный HTML, но не текущий DOM.

Вы можете найти решения сохранения DOM с помощью безголовых веб-браузеров — это, в принципе, работает, это сохранит DOM в исходном состоянии, до того, как веб-страница была как-либо изменена.

Вы можете сохранить текущий DOM и затем открыть веб-страницу и она будет выглядеть точно также, как и то, что вы видите во время сохранения. Для этого мы нам придётся воспользоваться инструментами разработчика.

Как сохранить DOM в Chrome

Чтобы сохранить DOM в Chrome, нажмите F12 и перейдите во вкладку Elements.

Кликните правой кнопкой мыши по тэгу

<html>

Примечание: тэг может иметь свойства и выглядеть по-другому, например:

<html lang="ru-RU" class=" js">

Выберите Copy → Copy outerHTML.

Затем вставьте содержимое буфера обмена в файл и сохраните его с расширением .htm или .html.

Как сохранить DOM в Firefox

Чтобы сохранить DOM в Firefox, нажмите F12 и перейдите во вкладку Inspector.

Кликните правой кнопкой мыши по тэгу

<html>

Примечание: тэг может иметь свойства и выглядеть по-другому, например:

<html lang="en-US" dir="ltr">

Выберите Copy → Outer HTML.

Затем вставьте содержимое буфера обмена в файл и сохраните его с расширением .htm или .html.

Почему после сохранения HTML DOM страница не отображается или выглядит иначе

Некоторые сайты имеют JavaScript код, который проверяет, с каким адресом открыта страница и прячет её содержимое, если это не адрес исходного сайта.

Чтобы отключить эту защиту, вам нужно отключить или удалить JavaScript скрипты (как содержащиеся в тэгах script, так и подключаемые с помощью внешних файлов .js.