**DOM** stands for Document Object Model. In the world of web, all HTML webpages are referred to as **documents**. The Document Object Model represents each of these web pages in a tree-like structure to make it easier to access and manage the elements. 
$$$$
# How is a DOM created?

DOM contains a bunch of nodes where each node represents an HTML element. The `<HTML>` tag always comes at the top and hence is called the "**root node**". The rest of the nodes come under it and hence are called "**children nodes**". The nodes present at the bottom are called "**leaves**" and are usually filled with elements' attributes, values and events.

In JavaScript, DOM is actually a class that makes it really easy to define each element present within a web page so it can be modified later. Whenever a page is loaded in the browser, its document object is formed that is named as "document". You can apply built-in methods on this object to access and modify the HTML elements. 

$$$$
# Example
Consider this small `HTML` document:


<html>
 <head>
   <title> My webpage </title>
 </head>
 <body>
   <div id="content">
     <p> Hello!</p>
   </div>
 </body>
</html>

codemirror

The Document Object Model of this code can be created like this:

What is DOM?

DOM stands for Document Object Model. In the world of web, all HTML webpages are referred to as documents. The Document Object Model represents each of these web pages in a tree-like structure to make it easier to access and manage the elements.  How is a DOM created? DOM contains a bunch of nodes where each node represents an HTML element. The  tag always comes at the top and hence is called the “root node”. The rest of the nodes come under it and hence are called “children nodes”. The nodes present at the bottom are called “leaves” and are usually filled with elements  attributes, values and events. 