DOM in Webpage

DOM stands for Document Object Model. A webpage is nothing but just a programming interface that displays the HTML or XML content in the browser. It converts the HTML or XML content into an object model type. So that we can alter or update the contents and also can remove the content in the Webpage dynamically by using a scripting language. Commonly, all web developers use JavaScript as a scripting language to edit the webpage.

DOM is just creating Document Tree by using the HTML elements like trees having multiple branches. In trees every branch has sub-branches likewise in DOM also each element will have sub-elements. Document is the root element in every DOM, html is the sub-element of Document and head and body are the two sub-elements for the html element likewise it will nest the sub-elements. Each element in the DOM is a node.

DOM is combined of CORE DOM and HTML DOM. CORE DOM is used for converting the XML contents and HTML DOM is used for HTML contents. We can say DOM gives the skeleton structure for our webpage. For example, we can take our bodies. If our body is in a rounded shape without having shaped hands, legs, head etc.. we could not tell anyone about the pain if we have pain in a particular area. Likewise, DOM is making the HTML contents into an easily accessible object type model. So Scripting languages such as JavaScript can reach the inner elements of the object and can make changes or updates to the object.

DOM gives some web APIs to easily access the document object type. For example, getElementById, getElementByClass, getElementByTagName..etc. Along with APIs, every node in the objects can be controlled and managed by event listeners. Some event listeners are onClick, mouseOver, mouseUp, and onChange. By combining with a scripting language, we can easily access, change and update the elements in the object model.

DOM is fully free of language-based. It just gives the structure for the webpage so that it will be easily accessible by scripting languages. So DOM is not based on Javascript. DOM can also be managed by other server-side languages like Python, Ruby and PHP. But they cannot make changes in the HTML contents dynamically. It can make changes only before sending the document to the client side. In client-side languages like JavaScript, they can dynamically update the contents in the HTML with the help of DOM.

Thanks for spending some good time to read this blog. If I had made any mistakes with his blog, please let me know by your valuable comments. And also you can too share your thoughts about DOM.

ByeBye...