# Overview

<figure><img src="/files/E0pA7NbvQkTUWStjMaUr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dShjh9Lzf9SS1BzJv0K3" alt=""><figcaption></figcaption></figure>

The Document Object Model (DOM) is the programming interface for web documents. It represents the web page so that programs can change the document structure, style, and content.

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

* The Document Object is the root of the tree
* All elements, their attributes, and text content are represented as objects within the tree
* Each object can have child objects, representing the elements or nodes within it

With the DOM, JavaScript can access and manipulate all the elements on a web page. This means that JavaScript can:

* Change the content of an HTML element
* Change the attributes of HTML elements
* Add or remove HTML elements and content
* React to HTML events like clicks or page loads
* And more!

In essence, the DOM allows you to interact with and modify a web page using JavaScript.

Here's a basic introduction to working with the DOM in JavaScript:

1. Accessing Elements:

To access an element in the DOM, you can use the `document` object, followed by the method to access the element. For example, to access an element with an `id` attribute of "my-element", you can use `document.getElementById("my-element")`. This method returns the element as an object that you can then work with.

2. Modifying Elements:

Once you have accessed an element in the DOM, you can modify its content or attributes. For example, you can change the text content of an element using the `textContent` property. To change the background color of an element, you can use the `style.backgroundColor` property.

3. Adding and Removing Elements:

You can also add new elements to the DOM or remove existing ones. To create a new element, you can use the `createElement` method and then add it to the document using the `appendChild` method. To remove an element, you can use the `removeChild` method.

4. Event Handling:

You can also add event listeners to elements to respond to user interaction. For example, you can add a click event listener to a button element using the `addEventListener` method.

Here's an example code snippet that demonstrates some of these basic concepts:

<pre class="language-markup"><code class="lang-markup">&#x3C;!DOCTYPE html>
&#x3C;html>
  &#x3C;head>
    &#x3C;title>DOM Example&#x3C;/title>
  &#x3C;/head>
  &#x3C;body>
    &#x3C;div id="my-element">Hello, World!&#x3C;/div>
    &#x3C;button id="my-button">Click me&#x3C;/button>

    &#x3C;script>
      // Accessing an element
      var element = document.getElementById("my-element");

      // Modifying an element
      element.textContent = "Hello, DOM!";

      // Adding a new element
      var newElement = document.createElement("p");
<strong>      newElement.textContent = "This is a new paragraph";
</strong>      document.body.appendChild(newElement);

      // Removing an element
      var oldElement = document.getElementById("my-element");
      document.body.removeChild(oldElement);

      // Adding an event listener
      var button = document.getElementById("my-button");
      button.addEventListener("click", function() {
        alert("Button clicked!");
      });
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dhrubo.gitbook.io/programming-with-js/dom/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.