How to save the entire HTML DOM in its current state

What is Document Object Model (DOM)?

The content of a web page consists of HTML code received from a web server. But modern technologies (HTML 5 and JavaScript) allow you to change the content of a web page on the fly: JavaScript can add new elements, change the properties of existing elements, remove elements and perform a variety of actions with them. JavaScript can just clear all the HTML code received from the web server and create a completely different page.

HTML DOM (Document Object Model) is the content of a web page at the current moment, after JavaScript has added, removed or changed elements.

That is, when a web page is loaded, its DOM corresponds to the HTML code received from the server. In the future, the DOM may not change (for static pages), or change greatly under the influence of JavaScript.

You may have already noticed that for some sites, the saved web page looks completely different from what you saw on your screen. This happens because when you perform a “Save As” operation, you save the HTML that the server sent you, but you do not save the current DOM.

In a real sense, the DOM is the HTML that forms the current version of the web page.

How to see the DOM

To see the DOM in Chrome, press F12 and go to the Elements tab.

There you will see the HTML code – this is the DOM in its current state. You can perform various actions that cause changes on the web page, and all these changes will immediately change the DOM – you can see how the HTML code changes.

You can manually edit the DOM (for example, delete some elements) and this will immediately affect the content of the web page.

In Firefox, to view the DOM, press F12 and go to the Inspector tab. In Firefox, you can do similar actions with changing the DOM or watch it change when you change the web page.

How to save the DOM

So, how do you save the DOM of a web page in its current state?

First, as already said, the “Save As” operation will only save the original HTML, but not the current DOM.

You can find solutions for saving the DOM using headless web browsers – this will work, but not as you expect: it will save the DOM in its original state, before the web page was changed in any way.

You can save the current DOM and then open the web page and it will look exactly the same as what you see when you save. To do this, we will need to use Developer tools.

How to save DOM in Chrome

To save DOM in Chrome, press F12 and go to the Elements tab.

Right-click on the tag

<html>

Note: the tag may have properties and look different, for example:

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

Select Copy → Copy outerHTML.

Then paste the contents of the clipboard into a file and save it with the .htm or .html extension.

How to save DOM in Firefox

To save DOM in Firefox, press F12 and go to the Inspector tab.

Right-click on the tag

<html>

Note: the tag may have properties and look different, for example:

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

Select Copy → Outer HTML.

Then paste the contents of the clipboard into a file and save it with the extension .htm or .html.

Why the page is not displayed or looks different after saving the HTML DOM

Some sites have JavaScript code that checks the address of the page and hides its contents if it is not the address of the original site.

To disable this protection, you need to disable or delete JavaScript scripts (both contained in script tags and included using external .js files.