After you had finished that Essay, you decided that you wanted to change the first paragraph’s font color to red. To make it stand out more.
Now, imagine that you had magical powers. And that you could simply do this by taking your hand, plucking the paragraph with your fingers, rubbing the paragraph in your palm to change the color, and then setting it back down onto the page. Wouldn’t that be awesome (and also a pretty cool party trick)?
This is essentially what the DOM allows you to do with web pages. In the case of the example above, the DOM would be the hand that allows you to pick up, manipulate and drop the elements and/or contents of those elements.
The DOM is essentially an interactive layer that sits on top of a web page and makes it easier to interact with that page.
Within the DOM the elements and contents that we are referring to are called ‘nodes’. These nodes exist on a tree-like structure, that is best visualized as a flowchart.
You can see an example of this here: [highlight what the different numbers mean – 9 signals document type, 1 signals an element, 3 signals content, and so on and so forth.]
What we have above is the general flow of a HTML document that is created and represented within the DOM. This is essentially how the DOM ‘sees’ a web page.
It is, essentially, an API for the Web Document, whether that document is in HTML, XML or another compatible format.
The DOM is like the fingers that allow you to pluck, structure and then interact with the elements from a page of an essay you just hand-wrote on a piece of paper, and manipulate them how you want, and then put them back onto the paper. Except in this case, that paper is the web.