10. Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of HTML documents as a tree-like structure, where each node represents an element, attribute, or piece of text in the document. The DOM provides a way for JavaScript to interact with and manipulate the content, structure, and style of web pages dynamically.

Core Concepts of the DOM:

Document Object Model:
- The DOM represents the structure of an HTML document as a tree of nodes.
- Each node corresponds to a different part of the document, such as elements, attributes, or text.
Nodes:
- Nodes are the building blocks of the DOM tree.
- The main types of nodes are:
  - Element nodes: Represent HTML elements (e.g., <div>, <p>, <h1>).
  - Text nodes: Represent text content within elements.
  - Attribute nodes: Represent attributes of elements.
Traversal and Manipulation:
- JavaScript can traverse the DOM tree to access nodes and manipulate their properties, attributes, and content dynamically.
- DOM manipulation includes operations such as adding, removing, or modifying elements, attributes, and text content.

Important DOM APIs:

Document Object:
- The document object represents the entire HTML document.
- It provides methods for accessing and manipulating elements, such as getElementById(), querySelector(), createElement(), appendChild(), etc.
Element Object:
- Element objects represent HTML elements in the DOM tree.
- They provide properties and methods for working with elements, such as textContent, innerHTML, setAttribute(), classList, etc.
Node Object:
- The Node interface is the base class for all types of nodes in the DOM.
- It provides properties and methods common to all nodes, such as parentNode, childNodes, appendChild(), removeChild(), etc.
Event Handling:
- The DOM provides mechanisms for handling user events, such as mouse clicks, keyboard inputs, and form submissions.
- Event handling APIs include methods like addEventListener(), removeEventListener(), and properties like onclick, onmouseover, etc.
Traversal:
- DOM traversal APIs allow you to navigate and search the DOM tree.
- Methods like parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling, querySelector(), and querySelectorAll() facilitate traversal and selection of elements.

Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Example</title>
  </head>
  <body>
    <div id="container">
      <h1>Hello, DOM!</h1>
      <p>This is a paragraph.</p>
      <button id="myButton">Click Me</button>
    </div>

    <script>
      // Accessing elements and modifying content
      const heading = document.querySelector('h1');
      heading.textContent = 'Manipulated Heading';

      // Creating and appending elements
      const newParagraph = document.createElement('p');
      newParagraph.textContent = 'This is a new paragraph.';
      document.getElementById('container').appendChild(newParagraph);

      // Handling events
      document.getElementById('myButton').addEventListener('click', function () {
        alert('Button clicked!');
      });
    </script>
  </body>
</html>

In this example:

We access elements using methods like querySelector().
We modify element content using properties like textContent.
We create new elements using createElement() and append them using appendChild().
We handle the button click event using addEventListener().

The DOM provides a powerful interface for JavaScript to interact with web documents dynamically, enabling the creation of dynamic and interactive web applications. Understanding the DOM and its APIs is essential for front-end web development.

DIPACE

Understanding the Document Object Model (DOM) in JavaScript

10. Document Object Model (DOM)

Core Concepts of the DOM:

Important DOM APIs:

Example: