**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?

How is a DOM created?

Example