JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



DOM Document

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can interact with the page.

The DOM is an essential part of making websites interactive. It is an API that allows developers to manipulate the content and structure of a web page dynamically. The DOM is a tree-like structure that represents the HTML elements of a web page. Each element is a node in the tree, and developers can access and manipulate these nodes using JavaScript.

Here is an example of how to access an element using the DOM:

<html>
  <body>
    <div id="example">
      <p>Hello World!</p>
    </div>
  </body>
</html>

<script>
  var example = document.getElementById("example");
  example.innerHTML = "Hello DOM!";
</script>

In this example, we use the getElementById() method to access the <div> element with the ID of "example". We then change the content of the <p> element inside the <div> to "Hello DOM!" using the innerHTML property.

The DOM provides a powerful set of tools for developers to manipulate web pages. It allows for dynamic updates to the content and structure of a page, making it possible to create interactive and engaging web applications.

Here is another example of how to use the DOM to create a new element:

<html>
  <body>
    <div id="example">
      <p>Hello World!</p>
    </div>
  </body>
</html>

<script>
  var newElement = document.createElement("h1");
  var textNode = document.createTextNode("Hello DOM!");
  newElement.appendChild(textNode);
  var example = document.getElementById("example");
  example.appendChild(newElement);
</script>

In this example, we use the createElement() method to create a new <h1> element. We then use the createTextNode() method to create a text node with the content "Hello DOM!". We append the text node to the <h1> element using the appendChild() method. Finally, we append the new <h1> element to the <div> element with the ID of "example".

The DOM is a powerful tool for web developers, and it is essential to understand how it works. By using the DOM, developers can create dynamic and interactive web pages that engage users and provide a better user experience.

References

Activity