JavaScript DOM

The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to access and manipulate web page content, structure, and styles dynamically.

DOM stands for Document Object Model.
It represents an HTML document as a tree of objects (nodes).
The browser automatically creates the DOM when a web page loads.
JavaScript uses the DOM to access and manipulate HTML elements.
The DOM represents every HTML element as an object. These objects contain properties, methods, and attributes (stored as name-value pairs), allowing JavaScript to access and manipulate the web page dynamically.
The DOM allows JavaScript to change content, attributes, styles, and structure of a web page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello Vicky</h1>
    <p>Welcome to DOM</p>
    <button>Click Me</button>
</body>
</html>

The browser converts it into a DOM Tree like this:

Document
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │       │
    │       └── "My Page"
    │
    └── body
        │
        ├── h1
        │   │
        │   └── "Hello Vicky"
        │
        ├── p
        │   │
        │   └── "Welcome to DOM"
        │
        └── button
            │
            └── "Click Me"

Understanding the relationships

body
├── h1
├── p
└── button

Here body is the parent node.
h1, p, and button are child nodes of body.
h1, p, and button are siblings of each other.

A DOM Tree is a hierarchical structure where each HTML element is a node connected through parent-child and sibling relationships, allowing JavaScript to navigate and manipulate the page.

We use the DOM (Document Object Model) because it allows JavaScript to interact with and modify a web page after it has loaded.

Without the DOM, HTML would just be a static document.

Example for DOM

This the Example code shows how the Dom will Actually access and modify the HTML elements.

<!DOCTYPE html>
<html>
<body>

    <h1 id="heading">Welcome</h1>

    <button onclick="changeText()">
        Change Text
    </button>

    <script>
        function changeText() {
            document.getElementById("heading").textContent = "Welcome Vicky";
        }
    </script>

</body>
</html>

Modify the Text

document.getElementById("heading").textContent = "Welcome Vicky";

textContent is a property of the DOM element.
Assigning a new value updates the text inside the element.

Before:

<h1 id="heading">Welcome</h1>

After button click:

<h1 id="heading">Welcome Vicky</h1>

Why do we use the DOM?

The DOM allows JavaScript to access and manipulate HTML elements dynamically. For example, we can select an element using getElementById() and change its content using the textContent property without reloading the page.

Example

document.getElementById("heading").textContent = "Welcome Vicky";

Here document represents the web page.
getElementById() selects the element.
textContent modifies the text inside that element.
This makes web pages interactive and dynamic.

The DOM is a tree-like representation of an HTML document that allows JavaScript to access, modify, create, and delete web page elements dynamically.

References

https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/javascript/how-to-manipulate-dom-elements-in-javascript/