HTML DOM

Introduction

The abbreviation DOM represents Document Object Model. It enables us to modify the document. The DOM serves as a programming interface for working with HTML and XML (Extensible Markup Language) documents. It allows us to specify the logical layout of the document and enables us to interact with and modify it. The DOM is often referred to as a logical entity as it does not have any object relationships.

Simply put, the Document Object Model (DOM) is a method of representing a webpage in a structured hierarchical format. This format allows programmers to comprehend the webpage seamlessly. Through the DOM, programmers can effortlessly interact with and modify HTML elements such as tags, IDs, classes, attributes, and elements using the commands or methods offered by the DOM. Additionally, the DOM enables JavaScript to interact with the behavior of HTML and CSS. Essentially, DOM serves as an API designed for interacting with HTML or XML documents.

Why is DOM Required?

• ✅ With the help of HTML, we can create the web page's structure and add the behaviour to the web page with the help of javascript. But the javascript cannot understand the document type when loaded to the web page. So for the understanding of javascript, DOM is created.
• ✅ We can call DOM as it is the representation of the HTML, but it is in a different format that is used for the object.
• ✅ Javascript can manipulate the DOM very easily. In the web page, the javascript cannot easily understand the tags, i.e., <h1>H</h1>, but it can easily understand the h1 object with the help of DOM.
• ✅ Nowadays, it is very easy for javascript to understand the DOM object with different functions of the DOM.

Structure of DOM

The Document Object Model (DOM) can be visualized as a hierarchical structure resembling a tree. The concept of a "structural model" is often utilized to characterize this tree-like organization of the DOM. Each division of the tree is depicted as a node, with each node housing an object. By employing event listeners in JavaScript, we can associate them with nodes to initiate actions on the specified object. A crucial aspect of the DOM is structural isomorphism, which asserts that when two DOMs are employed to portray the same component, they will generate identical structural models featuring the same objects and connections.

Why is It Called an Object Model?

The file is utilized for constructing the model entity. This entity encompasses the layout and functionalities of both the entity and the file. It consists of the webpage's tag and attribute.

Properties of DOM

Let's explore the characteristics and interactions of the document, as well as how the Document Object Model (DOM) can be used to modify the document entity, as illustrated in the diagram below.

• ✅ Window object: A browser object is always at the top of the hierarchy. We can also call it an API that is used to set and access all the properties and methods in the browser. It is created automatically by the browser.
• ✅ Document Object: When the document in the HTML is loaded into a window, it automatically becomes the document object. The document object has various properties, all referring to the other object. Then with that object's help, we can access and modify the object's content. If there is a need to access the particular object of the HTML document, then we can start accessing it with the help of the "document" object. The "Document" object is one of the properties of the object of the window.
• ✅ Form Object: With the help of a form object, we can represent it by the form tag.
• ✅ Link object: With the help of a link object, we can represent it by the link tag.
• ✅ Anchor object: With the help of an anchor object, we can represent it by the href tag.
• ✅ Form control element: There are so many control elements in the form tag, and these elements are fields, buttons, radio buttons, checkboxes, etc.

Methods of Document Object

There are so many methods to call the document object. These are as follows.

• ✅ Write("string" ): With the help of this Method, we can write the given string to the document.getElementById: with the help of this Method, we can return the element by giving the ID value.
• ✅ getElementByName: With the help of this Method, we can return all the elements having the same name value.
• ✅ getElementByTagName: With the help of this Method, we can return all the elements having the same tag name.
• ✅ getElementByClassName: With the help of this Method, we can return all the elements having the same class name value.

Example 1:

In this instance, we will explore how to use the getElementById method within an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>C# Tutorial</h2>
  
  
  <p id="intro">Welcome to our tutorial.</p>



   


<p>This example illustrates the <b>getElementById</b> method.</p>



  <p id="demo"></p>



  <script>
  const element = document.getElementById("intro");
  document.getElementById("demo").innerHTML =
   "C# Tutorial introduction is: "+ element.innerHTML;
  </script>
</body>
</html>

Output:

Example 2:

In this illustration, we will observe the HTML element represented in a hierarchical, tree-shaped format.

<table>
<ROWS>
               <tr>
               <td>Car</td>
               <td>Scooter</td>
               </tr>
               <tr>
               <td>MotorBike</td>
               <td>Bus</td>
               </tr>
</ROWS>
</table>

The code is transformed into a hierarchical structure resembling a tree when processed by the browser. This structure is depicted as follows:

What is DOM Not?

• ✅ We can also see that the DOM is not a type of binary description. We cannot write any binary language in the source code of the HTML code.
• ✅ We cannot use DOM to describe the object of the XML or HTML. But in XML and HTML, DOM is used as the object.
• ✅ We cannot represent the DOM as the set of the data structure. It is used as an interface that specifies the representation of the object.
• ✅ With the help of DOM, we cannot show the criticality of the object present in the document because it does not have the information of the object present in the document.

Levels of DOM

Numerous layers exist within the Document Object Model (DOM). The levels within the DOM include the following:

At Level 0, the Document Object Model (DOM) offers a foundational set of low-level information.

Level 1: At this stage, the Document Object Model (DOM) delineates the primary components of the HTML code, which consist of:

• ✅ Core: Within the DOM framework, the core element furnishes a foundational interface essential for representing structured documents at a low level.
• ✅ HTML: The HTML component in DOM offers a more advanced interface for representing structured documents at a higher level.

Level 2: In DOM, there are six parts in level 2. These are as follows.

• ✅ CORE2: With the help of core 2, we can extend the core functionality defined by level 1 of the DOM.
• ✅ VIEWS: With the help of views, we can allow all the programs to access dynamically and manipulate the content in the document.
• ✅ EVENTS: In DOM, the scripts are executed when the user reacts on the webpage.
• ✅ STYLE: With the help of style, we can allow all the programs to access dynamically and provide the style to the content in the document.
• ✅ TRAVERSAL: With the help of Traverse, we can perform dynamic traverses in the document's content.
• ✅ RANGE: With the help of range, we can determine the range of the content in the document.

Level 3: In DOM, there are five parts in level 3. These are as follows.

• ✅ CORE 3: With the help of core 3, we can extend the core functionality defined by level 2 of the DOM.
• ✅ LOAD AND SAVE: With the help of this, we can load the content of XML and HTML into the program dynamically into the DOM document. Then it saves the DOM document into an XML document in serialization.
• ✅ VALIDATION: With the help of this, we can update the content and structure of the documents by ensuring the validation of the document.
• ✅ EVENTS: With this help, we can extend the functionality of the events specified by level 2 of the DOM.
• ✅ XPATH: It is a type of language by which we can access the DOM tree.

Example 3:

In this instance, we will be working with the Document Object Model (DOM) using the getElementById Method.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <label>Enter Value 1: </label>
  <input type="text" id="val1" />
  <br />
  <br />
  <label>Enter Value 2: </label>
  <input type=".text" id="val2" />
  <br />
  <button onclick="getAdd()">Click To Add</button>
  <p id="result"></p>



   
  <script type= "text/javascript">
  function getAdd() {

    const num1 = Number(document.getElementById("val1").value);

    const num2 = Number(document.getElementById("val2").value);
    const add = num1 + num2;
    console.log(add);
     
  
    document.getElementById("result").innerHTML = "Addition : " + add;
     
    
    document.getElementById("result").style.color = "red";
  }
  </script>
</body>
</html>

Output: