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 tree
The 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:
<HTML>
<HEAD>
<TITLE>HTML Example</TITLE>
</HEAD>
<BODY>
<p>This is a paragraph</p>
</BODY>
</HTML>
Now let's try to transform the above into a DOM tree!
html
head
#text: lbspsp
title
#text: HTML Example
#text: lbsp
#text: lbsp
body
#text: lnspsp
p
#text: This is a paragraph
Ok, as you can see, the above is literally a tree representation of our markup.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.
Manipulating the DOM tree
It is possible to manipulate the DOM tree and I'm sure you do it a lot, maybe without knowing it. Because every time we use, for example, JavaScript and we change an element attribute, we are actually manipulating the DOM tree. Many times when we use jQuery we do the same. We can select an element and change its appearance or content: doing so we manipulate the DOM tree.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.
Very simple and nice to understand DOM. Altough we do play with the DOM tree and manipulations every day but may not be aware of it. Thanks dear, nice one.
ReplyDeleteThank you for sharing your thought!
Delete