If you are a regular visitor of web sites related to coding and web development, you have surely encountered the term "DOM" or, more often, the concept of DOM tree. In this short post we will explore the meaning of DOM and of DOM tree. I will try to put it in the simplest way possible, so that whenever we will encounter the term again in other documents or reference web sites, we will know what they are talking about.
What is DOM?When we create an HTML page, we know that the document is meant to be understood and processed by a dedicated software. The latter is called "User agent" and usually it is a web browser. When our beloved user agent starts to parse the HTML document, it basically transforms the HTML markup into a DOM tree. DOM is an acronym and it stands for Document Object Model.
The DOM treeThe DOM tree is actually - guess what - a tree. It has a root and branches that are called nodes. Inside nodes there are elements or other nodes. We can visualise a DOM tree exactly like a tree and nodes like branches that can have other branches and so on.
Just to better understand the concept, we can create an HTML page and see how the markup is transformed into a DOM tree.
Consider the following example:
Now let's try to transform the above into a DOM tree!
<p>This is a paragraph</p>
Ok, as you can see, the above is literally a tree representation of our markup.
#text: HTML Example
#text: This is a paragraph
The root element of the tree is the HTML element which contains two other elements: head and body. This is a basic HTML structure as we very well know. Text nodes contains spaces (sp) and line breaks (lb), however it must be noted that whitespaces before the head start tag are removed while all whitespaces after the body end tag are placed at the end of the body section.
Following the tree structure we can see that the head element has a title element in it. The title element contains a text node ("HTML Example"). At the same time the body element contains a p element which contains a text node ("This is a paragraph").
As you can see it really is a tree, with a root and branches which might have other branches.
Every element of the DOM tree is actually an object and we can manipulate, for example, attributes related to those elements.
This concludes our journey. We have explored the DOM tree and I hope I gave you some valuable information about it. Please, again, share your thoughts about it.