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:

Property	Description
documentElement	Get a root element `<HTML>` from the HTML document.
getElementById	Get a page element using the id
createElement	Create an element node on the page.
createAttribute	Create an attribute node on the page.
createTextNode	Create a text node on the page.
getElementsByTagName	Returns one array with the elements of that tag.
appendChild	Add a child element.
removeChild	Remove a child element.
parentNode	Return 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.

FL4V.IO

The Document Object Model - DOM

DOM Introduction

Document Object.

Practicals Examples.

Conclusion.

© 2022 Copyright: fl4v.io