DEV Community

loading...
Cover image for Day 1 : The DOM

Day 1 : The DOM

oreoyona
Updated on ・2 min read

The Document Model Object(DOM) is an inevitable notion in Web programming.

This concept as important as it is, remained too abstract for me until I apprehend it in a certain way.

The definition which is given to us by the documentation may be at first a little intimidating (and that's an euphemism ).

Here is the definition of the DOM by MDN Docs:

« The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content. »

Well, you maybe have understand this definition but do you really have a clear idea of what exactly the DOM is ? Cause I don't.

So here is how I now understand it:

We have the html code below:

100 days to learn JavaScript

What if we want to add some conditions or 'reactions' to our form ? for example show a message notifying the user that his or her form has been sent ?

How can we do it with JavaScript ? We'll code it of course but the code we will write need to actually access the element we want to modify on the web page right ?

When we visit a website via Chrome or Safari or whatever you want, the browser loads the page (an HTML document) in memory and create a model of it to interpret and render to us.

The set of rules which specifies how the browser must model the web page is the DOM.

These rules are independents of HTML or JavaScript.

To be clear, the DOM is an interface that gives us the possibility to modify a web page with our scripts.

The browser structures the web page using a certain logic provided by the DOM, The DOM tree.

This structure organizes the webpage in parents elements and children that we call nodes just like a tree.
100 days to learn JavaScript

These elements are objects and have properties. I mean that they have some qualities that will give us the possibility to modify/manipulate them with our scripts.
Here is again, the definition provided by MDN Docs:

«The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.»

Does it now seem clear to you ? I hope so!

Please feel free to tell me that I'm wrong. I am here to learn

We will learn together tomorrow how to add some interactivity to our form via another important notion: DOM MANIPULATION

Discussion (8)

Collapse
jsnanigans profile image
Brendan Mullins

Nice explaination, I wish I would have found something like this when I was learning about the DOM... For a long time I just thought of it as "stuff that happens inside the websit with the divs"

Collapse
oreoyona profile image
oreoyona Author

Lol, thank you. I truly appreciate

Collapse
wasiuhub profile image
Wasiu-hub

Good explanation

Collapse
oreoyona profile image
oreoyona Author • Edited

Thank you very much

Collapse
raphaeljong profile image
Raphael Jun Jie Jong

Nice

Collapse
oreoyona profile image
oreoyona Author

Thanks

Collapse
lostgirljourney profile image
Falguni Sarkar

You just made my concepts more clear.

Collapse
oreoyona profile image
oreoyona Author

I'm glad that I have helped you