THE DOCUMENT OBJECT MODEL(DOM)

Today during instruction, we talked about HTML and CSS. What I found most interesting was structure of the Document Object Model (DOM). 

The DOM refers to the way web elements are organized. 

Consider the html snippet below:

The DOM can be represented as a tree structure. A tree structure refers to a collection of nodes consisting of a value and references to other nodes called children.

The tree structure of the DOM shown above is:

From the above tree, the html tag is a parent to the head and body tags. The head tag has the title tag as the child and the body tag has two children the paragraph and the division tags.

Just like when we learned trees, I realized that traversal is a major advantage of the tree data structure. 

Since the DOM is a tree, we can go forward or backwards in the DOM (in random access). We particularly applied this feature in the CSS when applying different styles to different elements. For example to access the button in the html code above, I will use body.div.button. Styling is eased when different elements are given ids and classes

Additionally, the tree structure of the DOM supports direct deletion of certain elements.

However, the entire document must be parsed before the tree is available to the application which makes the DOM unsuitable for large applications.

Going beyond merely understanding the different html tags enables me to predict what different arrangements of html elements will produce. It has also been a great advantage during styling using CSS because I am able to easily traverse the DOM to access the different elements I want to style.