What is the relationship been the DOM, raw html, a

Question

From my understanding the DOM is an object oriented representation of the HTML. If that is accurate than it would mean there are essentially three levels of abstraction in any given web page:

1. Javascript representation (DOM)
2. Raw HTML
3. Actual page displayed to user

What is the relationship between all these levels?

More specifically,

How does effecting the DOM (through vanilla Javascript) effect the display page? Does Javascript effect the display directly? Or does JS only effect the DOM and the display page changes to reflect the DOM?

Answer 1

I'm no expert in either of this but from my experience and reading, DOM (Document Object Model) is the modular structure of the actual HTML page wherein every entity (inputs, paragraphs, etc.) is represented in form of objects and each of these objects may or may not belong to a group (inputs to a form, paragraphs to a div, etc.). The actual page that is displayed to user in fact consists of the DOM, however, the relationship between these objects is hidden from the user because in first place, there is no use of it, and secondly, it isn't wise or secure to show it to user. However, you can find the relationship between dom elements by 'Inspecting elements' in a web browser.
Javascript does affect the DOM. If you're making any changes in DOM via JS, it may or may not be visible to user, depending upon what element you're affecting through JS (Hidden or displayed element). So concluding, HTML code is description of the DOM elements in an organised way where you can access and manipulate these elements using JS. Which means, JS and HTML are bound to each other through common elements known as 'DOM elements'. Where HTML is used to (only) create these elements, JS is used for (creating and) manipulating these DOM elements. But creating DOM elements using JS at a wide level is not suggested because of it's limits and the fact that JS is made for dynamic manipulation of DOM elements and not for creation of static elements.

Answer 2

Dom is the html parsed by the browser.

from here

1. DOM is a model of a document with an associated API for manipulating it.

2. HTML is a markup language that lets you represent a certain kind of DOM in text.

3. The Document Object Model (DOM) is a language-independent model made up of objects representing the structure of a document

and for the relationship between DOM and HTML

4. DOM is the tree model to represent HTML where each element from html acts as a node of the tree.

   5 When is the DOM different than the HTML?

Here's one possibility: there are mistakes in your HTML and the browser has fixed them for you. Let's say you have a <table> element in your HTML and leave out the required <tbody> element. The browser will just insert that <tbody> for you. It will be there in the DOM, so you'll be able to find it with JavaScript and style it with CSS, even though it's not in your HTML.

also read this and this

6. what is affected by javascript: javascript is interpreted by browsers and any change which javascript performs is on DOM not on html.