The DOM

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:

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.

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

Top comments (8)

Brendan Mullins • Jun 12 '21

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"