The Document Object Model – DOM

DOM Introduction

The browser uses the Document Object Model (DOM) to render and show you the web page. It’s the way to make the pages dynamic and interactive.

The DOM is like a tree of “nodes” representing the webpage’s contents in your diverse relationships with the HTML document.

The document object is who gives javascript access to the DOM tree on the web browser. Therefore, everything built by the browser on the Web page model can be handled through the javascript document object.

With DOM, you can move the page items and create CSS effects without reloading the page.

Document Object.

Is possible to access a wide range of properties through the document object. Take a look at some examples:

PropertyDescription
documentElementGet a root element <HTML> from the HTML document.
getElementByIdGet a page element using the id
createElementCreate an element node on the page.
createAttributeCreate an attribute node on the page.
createTextNodeCreate a text node on the page.
getElementsByTagNameReturns one array with the elements of that tag.
appendChildAdd a child element.
removeChildRemove a child element.
parentNodeReturn the parent node from one node.

Following is one example of a webpage DOM tree:

This tree structure is how the browsers organise the HTML marks and how the browser can see the HTML document.

Practicals Examples.

To better understand how all this works nothing better than showing it on the code, following you can see it on an HTML file and CODEPEN. It is perfect for doing some tests and playing with the code.

Following the examples on file:

<html>
  <style>
    .democlass {
      color: red;
    }
  </style>
  <body>
    <h1>The Document Object</h1>
    <h2>The documentElement Property</h2>
    <p>The element node is:</p>
    <p id="demo"></p>

    <h2>The getElementById() Method</h2>
    <p id="demo2"></p>

    <h2>The createAttribute() and setAttributeNode() Methods</h2>
    <p>
      Click "Add" to create a class attribute and add it to first h1 element.
    </p>
    <button onclick="myFunction()">Add</button>

    <script language="javascript">
      //The documentElement Property
      document.getElementById("demo").innerHTML =
        document.documentElement.nodeName;
      //The getElementById() Method
      document.getElementById("demo2").innerHTML =
        "It is a getElementById Method";
      //The createElement() Method
      // Create element:
      const para = document.createElement("p");
      para.innerText = "This is a paragraph created by createdElement.";
      // Append to body:
      document.body.appendChild(para);
      //The createAttribute() and setAttributeNode() Methods
      function myFunction() {
        // Create a class attribute:
        const att = document.createAttribute("class");
        // Set a value of the class attribute
        att.value = "democlass";
        // Add the class attribute to the first h1;
        document.getElementsByTagName("h1")[0].setAttributeNode(att);
      }
    </script>
  </body>
</html>

Conclusion.

Have much more to talk about DOM, and you can find it on this blog, but here we can see some basic forms to manipulate the DOM and understand how this element is important in web development.

Thank you for reading.



2 responses to “The Document Object Model – DOM”

  1. Nice post. I learn something totally new and challenging on websites I stumbleupon on a daily basis. It will always be interesting to read through content from other writers and use something from their websites.

Leave a Reply

Your email address will not be published. Required fields are marked *