what is the difference between dom representation and raw html document?

jumbo9i0 · March 6, 2021

manikyath · March 6, 2021

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

in short: it's a way of displaying a document (in this case HTML) that allows you to manipulate how the document is displayed.

for how little i know of it;. i presume in essence what it is used for in this case, is the little arrow things on the left to open/close sections of the document. for example if you want to see the <head> you can open it, but if you dont care about the contents of <head> you can close it.

Eigenvektor · March 6, 2021

Here's another simple explanation:

https://bitsofco.de/what-exactly-is-the-dom/

Basically it's an in-memory representation of the HTML document once the browser has parsed it that you can then manipulate (e.g. using JavaScript) to modify the page layout on the fly.

JacobFW · March 8, 2021

So I think there's actually at least two different questions that need to be answered for this to make sense

1) How is the webpage you view and interact with generated, both initially and as you use it?

2) Is the DOM just a parsed version of the HTML text or is there more to it than that?

1) One thing you'll notice on most pages is that if you go into the Inspect Element viewer, and compare that to the HTML when you go to View Source, you'll see that while they may have a little in common, there's still usually vast differences between them (technically they could be the same, but that's fairly uncommon as we're about to see). When you request to go to a page, your browser will download the initial html (which is what you see under View Source). In that HTML however are usually script tags, which contains code the browser will execute. In many sites this code will then finalize the web page that you'll see and interact with, and setup handlers for what happens when you, the user, clicks on certain buttons, or interact with various parts of the pages. You have to remember that HTML doesn't really "do" anything. It's more of schematic, that describes how the page should be constructed (think back to old sites from the 90's/early 2000's). If you click on a button to go to a certain menu or submit an order, it's the script code that runs in the background on your browser, modifying the web page that you see to respond to your requests.

When you click on Inspect Element, you're viewing all the changes to the web page that have taken place up to that point, starting with the browser downloading the initial source, running the initial scripts, and any other changes the scripts have made up to that point based on how you've interacted with the page.

2) The HTML (both what's loaded at the start and what the script code has modified as time has gone on) does govern the overall structure of the DOM, but there is more to it in that. First and foremost what you have to understand is the DOM is essentially a specialized database, which is designed both to aid the render engine as it creates what you see in the browser, and to allow script to interact with it quickly and easily. The data in the HTML is parsed and stored in the DOM's internal format, but then the DOM also has the ability to store extra data along with that. Additionally you can store handlers along with that data, so that if say, the user clicks on this element, it should execute a certain piece of code which the developer can specify, or if say the mouse hovers over a certain box or button, it should show a small tooltip which gives a description of what that's for.

TBH I feel like this is a case where reading the theory/description of what is happening might just confuse you more. I would suggest reading some tutorials on Javascript & JQuery, and play around with it yourself. I think it will make a lot more sense once you see how it works when you use it yourself.