What is DOM?

 

The Power Javascript brings to the table is DOM manipulation. But what is DOM? DOM is read as Document Object Model. It is a hierarchical tree like structure which depicts the entire webpage. It has different Nodes as its branches and they have a parent-child relation. Modern web browsers are able to read this structure and make changes accordingly. With Javascript one basically has the power to manipulate this structure.

 

 

 

Here the window is the root of the tree. The window provides us with predefined objects and methods. For example, console is an object provided by the window element. One can use this object to log something to the console by typing,

window.console.log('your message') 

The document is the parent element of all your html content and the one you'll be working with the most as a web dev. This gives us access to the html using document.body [targets the body of html], document.head [targets the head of html] etc. Some of you may also be familiar with the methods this provides such as Document.queryselector() and Document.getElementById().

In conclusion, DOM is a tree-like structure that is present on every webpage. Javascript gives is the ability to access with by targeting different objects and by utilizing various methods.