Document Object Model

Document Object Model

In this article, I'm going to talk about Document Object Model(DOM) and I'm going to make it simple for you to understand what DOM is. Now let's get started.

What is Document Object Model?

To help you understand what DOM is, first, let's talk about the three(3) essential parts of website development;

  1. HTML(HyperText Markup Language): This adds structure to our web pages using tags such as; <div>,<p>,<h>,<section>, etc.
  2. CSS (Cascading Style Sheet): Adds style to our web pages. E.g. color, margins, border, images, etc using ids, class or direct tags to reference HTML tags.
  3. JS (JavaScript): This adds programming to our web pages and giving it functionality, e.g. client side validation, effects and events, etc.

For JavaScript to be able to give our web pages the functionality we desire, that's where Document Object Model(DOM) comes in. Document Object Model is basically the representation of the same HTML document in a different format. DOM represents HTML as a tree structure, only this way can JavaScript be able to interact with the individual html components directly as objects.

To explain in very simple words DOM stands for Document Object Model, where Document stands for html files, Object stands for tags and elements and the Model stands for layout or structure.

fig1 WhatsApp Image 2022-03-03 at 8.35.39 PM.jpeg

HTML doc structure

 <html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <h1>Heading</h1>
        <div id="div1">
            <p>p Tag1</p>
        </div>
        <div id="div2">
            <p class="p2">p Tag2</p>
        </div>
    </body>
</html>

HTML represented as tree structure format by JavaScript i.e, the DOM

fig2 WhatsApp Image 2022-03-03 at 8.06.45 PM.jpeg

DOM is a programming interface or an API and this API can be used with any programming language most commonly, it is used with JavaScript and using DOM, we can easily read, access, update the style and document structure.

How does the JavaScript understand the HTML markup language? When the HTML doc is loaded in the browser, corresponding to that document, another representation of that document is created which is known as Document Object Model. What happens is that each of these tags are correspondingly represented as objects in the DOM hence, the name Object Model and they are represented in the hierarchy of their arrangement.

JavaScript cannot understand these tags but it can easily understand these objects. JavaScript can now access these objects using different functions and with that you can manipulate the different attributes of these objects for example, if you want to change the text inside the title tag, you can easily access this title object in JavaScript by accessing the DOM and then you can change the text inside the title tag, similarly, change the color, background, animate or just anything you would like to influence using DOM. The way it works is that JavaScript looks at the DOM in terms of Nodes.

NODES:

In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure; consisting of parents and children. These individual parts of the document are known as nodes. In fig2 above, the topmost node is the root node (Document Node) of the DOM tree, which has one child, the element and so on. Further, the text content inside an element is a child node of the parent element, for example, "My title" is considered as a child node of the title tag that contains it, and so on. Comments inside the HTML document are nodes in the DOM tree as well even though they don't effect the document in any way. HTML attributes such as id, class, title, style, etc. are also considered as nodes in DOM hierarchy.

Types of nodes

There are basically three(3) different types of nodes;

  • Element node
  • Attribute node
  • Text node

To understand nodes and how the three(3) types of nodes we mentioned works, you have to first understand that everything in the rectangular boxes is represented as object so using these nodes, you can be able to manipulate the DOM objects.

Element node:

The element nodes comprises of all the tags such as the html, head, body, h1, p, div tags etc. In our illustration above(fig2), everything in the orange box including the html tag can be accessed via element node.

Attribute node:

The attribute node comprises of the various html attributes such as id, class, title, style, etc. In our illustration above(fig2), everything in the red box can be accessed via the attribute node.

Text node:

The text node comprises of all text content of an element.

I believe you now understand the basic concepts of DOM in JavaScript. Thank you for reading and I hope you enjoyed the read. your comments and questions are welcomed in the comment section below.