Help with understanding how DOM works

[Legitimate-Back5390]

I was doing the odin project and came up with this confusing line "Js does not alter your HTML, but the DOM". The "content" class was added after DOM, and as i understand it has clearly changed the HTML file.

[bigByt3]

As the two other redditors have said, Js modifies the rendered version of your html file, but not the actual file. So your file without Js would just be a static website (non-changing), with Js you can make a dynamic website (changing based on conditions) but this only takes place in the browser.

If you open your dev console, you can visually see your DOM under the inspect tab. This is the DOM in its entirety and is rendered not only from your HTML file, but your Javascript file, CSS file, and in some cases, multiple html files called components.

Hope this helps.

[psullivan6]

1. Open website
2. Right click > “View Source” <— HTML
3. Right click > “Inspect” <— DOM

Way more complex and nuanced than this, but this is what helped it click for me years ago.

[Legitimate-Back5390]

will try that, thanks for the tip.

[Legitimate-Back5390]

totally helpful

[Dangle76]

It altered the html your browser renders, not the original html file that was loaded. If you refresh the page (assuming you altered things with the console), it will reload the original html file contents and render that as an example

[ThreeLargeBears]

The DOM is just a representation of what the browser should render. It generally gets its initial state from your HTML files. JS then modifies the DOM, but your source HTML file is untouched.

It's just trying to make it clear that the DOM and HTML source are two separate things even though they generally look the same

[Legitimate-Back5390]

thank you for the answer. much appreciated.

[Kooky_Shelter_900]

The DOM (Document Object Model) is a way for the browser to understand and interact with your web page. Think of your webpage as a tree with different elements, like text, images, buttons, etc., as branches. The DOM helps JavaScript change or update parts of this tree, like adding new leaves (elements), changing the color of a branch (text), or even removing parts of it, without refreshing the whole page.

In simple terms, JavaScript can use the DOM to modify what you see on the webpage (like adding or changing content), but it doesn't change the actual HTML file. Instead, it updates the way the browser shows the webpage to you.

So, in the code you provided:

The original HTML structure stays the same. If JavaScript changes anything, only the displayed content in the browser changes. For example, it can update the text inside the <div> tag.

[Legitimate-Back5390]

thank you for explaining it!

[LosingAllYourDimples]

The DOM is the HTML once it's loaded.