Getting Started with the DOM

Subscribe to my newsletter and never miss my upcoming articles

As a web developer, the Document Object Model (DOM) is one of the most important concepts worth understanding. After reading this article, you should understand the DOM, it’s tree-like structure, how to target, and manipulate the DOM with JavaScript.

Table of Contents

  1. Introducing the DOM
  2. Manipulating the DOM with JavaScript
  3. Conclusion
  4. Resources

Introducing the DOM

When a webpage fully loads, the browser creates a DOM of the page. The DOM is the data representation of the objects that comprise the structure and content of a document on the web.

The DOM treats a document as a tree of objects where each node represents a part of the document. To enable you to understand the DOM tree of objects, let’s convert the HTML elements in the code snippet below into a DOM tree of objects.

<!doctype html>
<html>
    <head>
          <title>The DOM</title>
     </head>
   <body>
        <p>I love my new blog on Hashnode!</p>
        <h3>I think you should get one too. </h3>
    <body>
</html>

Converting the code above to a DOM tree of objects will look similar to the diagram below:

domtree.PNG

And as you can see the first element HTML in the code snippet is the parent node of the tree while the head and body elements are child nodes of the HTML parent node. The title is a child node of the head element while the p and h3 elements are child nodes of the body element. If you’ve ever heard about the family tree in biology, then think of the DOM tree of objects as a similar replica of the family tree. For instance, in my family tree, my parents will be at the head of the tree (making them the parent node), because I am their child, I will be the next on the tree (making me the child node of the parent node), when I have a child, they will also join the family tree too (making them a child node of my node) and so on. That means there is no limit to how big the DOM tree can go.

Manipulating the DOM with JavaScript

The object-oriented representation of the HTML element on a document (webpage) makes it possible to modify the HTML element with a scripting language like JavaScript. It is important to know that this manipulation is made possible through the DOM programming interface which is a combination of JavaScript DOM methods and properties.

The DOM methods are actions you can perform on HTML elements while the DOM properties are values of the HTML elements that you can set or change. Now that you know the difference and importance of the DOM method and property, let’s use it to manipulate a document by changing and removing an HTML element on a webpage.

Changing the content of an HTML element

In the code snippet below, I used the getElementById() method to target the p element via its id="demo". After that, I used the innerHTML property to change the content of the p element from What is my name? to My name is Edidiong! when a user clicks on the Touch me to find out button.

<!doctype html>
<HTML>
    <head>
        <title>The DOM Programming Interface</title>
    </head>

   <body>
       <p id="demo"> What is my name? </p>
       <button onclick="myFunction()"> Touch me to find out</button>

    <script>
      function myFunction(){
        document.getElementById("demo").innerHTML="My Name is Edidiong";
       }
    </script>
  </body>
</html>

Hiding an HTML Element on a Webpage

Here, we want to make a hidden element to show on a webpage. As discussed earlier in the article, we always have to target the particular HTML element we want to manipulate first before going ahead with the manipulation. In the code snippet below, I used the getElementById() method to target the p element via its id="demo". Then I set the style display property to none so that whenever a user clicks on the Try it button, the contents of the paragraph tag will no longer show on the webpage.

<!doctype html>
<html>
  <head>
    <title>Hiding an HTML Element on a Webpage</title>
  </head>

  <body>
    <p id="demo" style="display: block;"> I will disappear if you click on the button below</p>
    <button onclick="myFunction()">Try it</button>

    <script>
      function myFunction(){
          document.getElementById("demo").style="display:none";
        }
    </script>
  </body>
</html>

Conclusion

The importance of understanding the DOM cannot be overemphasized and I hope this tutorial was helpful enough to ignite the need to study the DOM further, and to further explore targeting and manipulating HTML elements on the webpage.

Resources

This article only covers how to get started with the DOM so I curated a list of useful resources to help you learn more about the DOM.

Like this article? Follow @didicodes on Twitter.

Awopetu Rasheed Oluwadamilare's photo

Thanks for this Well explained and well structured even with the diagram example. Looking forward to see the continuation of this ma. 🥰🥰🥰

Edidiong Asikpo's photo

Software Engineer at Interswitch Group

It's really good to know you found the article useful. Thank you for reading.

Francisco Quintero's photo

As a Software Developer, the Document Object Model (DOM) is one of the most important concepts worth understanding.

You're 100% correct. If one is doing software for the web, one should be able to understand DOM and have basic ideas on how to traverse it and manipulate it.

The DOM API is huge and most of the times we just use few APIs. We don't need to learn them all but it's OK to know they exist to grasp our possibilities in the web browser.

Thanks for sharing, Edidiong :)

Edidiong Asikpo's photo

Software Engineer at Interswitch Group

Just like you said, we mostly use very few of the DOM APIs but understanding it is extremely very important.

Thank you for reading and sharing the article Francisco

Ngaji Samuel's photo

This is a great piece, someone just starting out with JavaScript will find this really useful.

Edidiong Asikpo's photo

Software Engineer at Interswitch Group

It is really good to know you found the article useful. Feel free to share it with anyone you think might find it useful.

Daily Dev Tips's photo

Love this explanation! very clear

Edidiong Asikpo's photo

Software Engineer at Interswitch Group

Glad you found it useful.

Daniel Waylonis's photo

A good introduction. I'm a big fan of using querySelector() rather than the older getElementById(), getElementByTagName(), and so on.

Edidiong Asikpo's photo

Software Engineer at Interswitch Group

Yeah, querySelector() is pretty cool as well.