DEV Community

Cover image for DOM and DOM Tree
Sajak Shrestha
Sajak Shrestha

Posted on

DOM and DOM Tree

Hey, you know what DOM is? Let's begin from the full form of the DOM. Actually DOM stand for Document Object Model. Where Document is the HTML content of our webpage. Wait, firstly lets know that where is DOM actually used. DOM is used to manipulate the Document or the HTML. Did you just asked why? Let's understand Why.

We know that HTML is the static application. But how is the data being updated in website if HTML is static? Here comes the DOM which connects the static HTML application to the Javascript in order to make the application dynamic. Now let's break the DOM in three different pieces.

  1. Document
    Document is the HTML content of our application which contains the element and their attributes

  2. Object
    Object is the Javascript object that contains the value and the attribute of the element

  3. Model
    Model is the hierarchical tree structure of the HTML document.

HTML 

<head>
    <Title>DOM</Title>
</head>
<body>
    <h1>Learning DOM</h1>
    <p>We are learning DOM and DOM tree</p>
</body>
Enter fullscreen mode Exit fullscreen mode

DOM 

{
    document: {
        body: {
            h1: "Learning DOM"
            p: "We are learrning DOM and DOM tree"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

As we can see on the above image, DOM is the programmatic representation of the HTML document structured as a Javascript Object So, DOM is exactly identical to the HTML page.

Then, What is the DOM tree? Let's discuss about it.

Image description

As we can see the above Image is representing the HTML elements on the tree like structure using root and node. This is the actual DOM tree. So, According to the Document Object Model every HTML element is the object and the hierarchical structure of the nodes, where each HTML element is represented as node is the DOM Tree.

Top comments (0)