What is DOM? Part-6

In this article, we will discuss Document Object Model(DOM) along with its properties and methods used to manipulate Documents, & understand their implementation through the examples.

The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup Language) and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Note: It is called a Logical structure because DOM doesn’t specify any relationship between objects.

DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or methods provided by the Document object. Using DOM, the JavaScript gets access to HTML as well as CSS of the web page and can also add behavior to the HTML elements. so basically Document Object Model is an API that represents and interacts with HTML or XML documents.

Why DOM is required?

HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects. Javascript interprets DOM easily i.e javascript can not understand the tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p, etc) by using different functions.

Structure of DOM: DOM can be thought of as a Tree or Forest(more than one tree). The term structure model is sometimes used to describe the tree-like representation of a document. Each branch of the tree ends in a node, and each node contains objects Event listeners can be added to nodes and triggered on an occurrence of a given event. One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.

Why called an Object Model?
Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a document and the objects of which it is composed like tag elements with attributes in HTML.

Properties of DOM: Let’s see the properties of the document object that can be accessed and modified by the document object.

Representation of the DOM

Window Object: Window Object is object of the browser which is always at top of the hierarchy. It is like an API that is used to set and access all the properties and methods of the browser. It is automatically created by the browser.
Document object: When an HTML document is loaded into a window, it becomes a document object. The ‘document’ object has various properties that refer to other objects which allow access to and modification of the content of the web page. If there is a need to access any element in an HTML page, we always start with accessing the ‘document’ object. Document object is property of window object.
Form Object: It is represented by form tags.
Link Object: It is represented by link tags.
Anchor Object: It is represented by a href tags.
Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons, checkboxes, etc.

Methods of Document Object:

write(“string”): Writes the given string on the document.
getElementById(): returns the element having the given id value.
getElementsByName(): returns all the elements having the given name value.
getElementsByTagName(): returns all the elements having the given tag name.
getElementsByClassName(): returns all the elements having the given class name.

write(“string”) example :

document.write("Hello, World!");

getElementById example :

 <div id="myElement">This is a div element.</div>

JavaScript:

 var element = document.getElementById("myElement");

getElementsByName Example :

 <input type="text" name="username" />
 <input type="text" name="password" />

JavaScript:

 var elements = document.getElementsByName("username");

getElementsByTagName Example:

    <p>This is a paragraph.</p>
    <p>Another paragraph.</p>

JavaScript:

    var paragraphs = document.getElementsByTagName("p");

getElementsByClassName Example :

    <p class="highlight">This is a highlighted paragraph.</p>
    <p>This is a regular paragraph.</p>

JavaScript:

    var highlightedElements = document.getElementsByClassName("highlight");

How can I change the content of a DOM element?

You can modify element content using properties like innerHTML (for HTML content), textContent (for text content), and innerText. Additionally, you can change attributes and styles using appropriate properties.

Example: In this example, We use HTML element id to find the DOM HTML element.

<!DOCTYPE html>
<html>
<body>
    <h2>Learning JS DOM</h2>

    <!-- Finding the HTML Elements by their Id in DOM -->
    <p id="intro">A Web Development class.</p>
    <p>This example illustrates the <b>getElementById</b> method.</p>
    <p id="demo"></p>
    <script>
        // Using getElementById to access the element with the id "intro"
        const element = document.getElementById("intro");

        // Modifying the content of the element with the id "demo"
        document.getElementById("demo").innerHTML =
          "The introduction is: " + element.innerHTML;
    </script>
</body>
</html>

How can I add new elements to the DOM?

You can create new elements using the createElement method and then add them to the DOM using methods like appendChild or insertBefore. To remove elements, use removeChild.

<!DOCTYPE html>
<html>
<head>
    <title>Adding Elements to the DOM</title>
</head>
<body>
    <h2>Add New Elements to the DOM</h2>

    <!-- Existing div element where we'll add new elements -->
    <div id="container">
        <p>This is an existing paragraph.</p>
    </div>

    <script>
        // Create a new paragraph element
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "This is a dynamically created paragraph.";

        // Access the container div where we want to add the new element
        const container = document.getElementById("container");

        // Append the new paragraph to the container
        container.appendChild(newParagraph);
    </script>
</body>
</html>

Certainly! Here's a code example that demonstrates how to add new elements to the DOM using the createElement method and then insert them using appendChild:

<!DOCTYPE html>
<html>
<head>
    <title>Adding Elements to the DOM</title>
</head>
<body>
    <h2>Add New Elements to the DOM</h2>

    <!-- Existing div element where we'll add new elements -->
    <div id="container">
        <p>This is an existing paragraph.</p>
    </div>

    <script>
        // Create a new paragraph element
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "This is a dynamically created paragraph.";

        // Access the container div where we want to add the new element
        const container = document.getElementById("container");

        // Append the new paragraph to the container
        container.appendChild(newParagraph);
    </script>
</body>
</html>

In this example:

We have an existing <div> element with the id "container" in the HTML.
Inside the <script> tag:
- We create a new paragraph element using document.createElement("p"). This creates a new <p> element in memory.
- We set the text content of the newly created paragraph using the textContent property.
- We access the container <div> by its id using document.getElementById("container") and store it in the container variable.
We use the appendChild method to add the new paragraph element (newParagraph) to the container <div>. This inserts the new paragraph as a child of the container.