What are the different types of DOM available to access and modify content in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn what are the different types of DOM available to access and modify content in JavaScript.

The Document Object Model (DOM) is a data representation of the objects that form the structure and content of a web document. It is an interface for scripting web pages. Programs can alter the document’s structure, style, and content by utilizing the DOM. The DOM represents each element as a node, and the programming languages like JavaScript can easily interact with the nodes to modify the page.

There are different types of DOM available to access and modify content in JavaScript, and those are −

The Legacy DOM − This model was introduced in early JavaScript versions. All browsers support it well, but just a few essential parts of documents, such as forms, form components, and pictures, are accessible.
The W3C DOM − The World Wide Web Consortium (W3C) has standardized the document object model, enabling access to and modifying any document element. Almost all current browsers support this model.
The IE4 DOM − IE4 introduced the document object concept in Microsoft’s Internet Explorer browser in Version 4. IE 5 and later versions include support for most basic W3C DOM features.

The DOM has many properties and methods to perform different tasks like changing the element’s content, style, etc. We will see how we can use the W3C DOM properties and methods to update the page.

Using The W3C DOM Properties

Example

In the below example, we have used the W3C DOM properties to change the element’s content, show the element’s id, and show the element’s tag name. The document.getElementById() method is used to access the DOM element. We will use three different properties: ‘innerHTML,’ ‘id,’ and ‘tagName.’ Three buttons are used with click events to execute separate functions for each task, and in these functions, we use the mentioned properties to modify the page.


<html>
<body>
   <h2>
      Using the <i> W3C DOM properties </i> to modify the webpage with JavaScript
   </h2>
   <button onclick="changeContent()"> Change Content </button>
   <button onclick="showID()"> Show ID </button>
   <button onclick="showTagName()"> Show Tag Name </button>
   <div 
      id="root" 
      style="
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(186, 235, 182);
         border: 1px solid gray;
      "
   >
      Welcome to Tutorialspoint!
   </div>
   <script>
      
      // root element
      const root = document.getElementById('root')
      
      // 'Change Content' button click event handler function
      function changeContent() {
         
         // using innerHTML property to change the content of the root element
         root.innerHTML = 'The content is changed!'
      }
      
      // 'Show ID' button click event handler function
      function showID() {
         
         // using id property to get the id of the root element
         const id = root.id
         root.innerHTML = 'The id of the element is: ' + id
      }
      
      // 'Show Tag Name' button click event handler function
      function showTagName() {
         
         // using tagName property to get the tag name of the root element
         const tag_name = root.tagName
         root.innerHTML = 'The tag name of the element is: ' + tag_name
      }
   </script>
</body>
</html>

Using The W3C DOM Methods

Example

In the below example, we have used the W3C DOM methods to change the element's background color and show the element's attributes; in this case, the attribute will be the element's class attribute. The document.getElementById() method is used to access the DOM element. We will use two different methods and those are ‘style.setProperty()’ and ‘getAttribute()’. Two buttons are used with click events to execute separate functions for each task, and in these functions, we use the mentioned methods to modify the page.


<html>
<body>
   <h2>
      Using the <i> W3C DOM methods </i> to modify the webpage with JavaScript
   </h2>
   <button onclick="changeBgColor()"> Change background-color </button>
   <button onclick="showAttribute()"> Show Class Attributes </button>
   <div 
      id="root" 
      style="
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(186, 235, 182);
         border: 1px solid gray;
      " 
      class="element item abc xyz"
   >
      Welcome to Tutorialspoint!
   </div>
   <script>
      
      // root element
      const root = document.getElementById('root')
      
      // 'Change background-color' button click event handler function
      function changeBgColor() {
         
         // using the style.setProperty method to change the background-color of the root element
         root.style.setProperty('background-color', '#f0f8ff')
      }
      
      // 'Show Class Attributes' button click event handler function
      function showAttribute() {
         
         // using getAttribute method to get the tag name of the root element
         const class_attributes = root.getAttribute('class')
         root.innerHTML =
            'The class attribute of the element: ' + class_attributes
      }
   </script>
</body>
</html>

In this tutorial, we have learned the different types of DOM available to access and modify content in JavaScript. We have learned about three kinds of DOM. The W3C DOM is the standard DOM used in almost every web browser. In addition, we have used different properties and methods of W3C DOM to modify the webpage.