agrawal's blog

DOM-(Document Object Model)

Piyush Agrawal's photo
Piyush Agrawal
·

2 min read

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text content. The DOM provides a way for programs to manipulate the structure, style, and content of web documents dynamically.

Key concepts related to the DOM:

1.Document:

The top-level object in the DOM hierarchy, representing the entire HTML or XML document. Accessed using the document object in JavaScript.

2.Node:

The basic building blocks of the DOM tree, representing different parts of a document. Common types of nodes include elements, attributes, and text nodes.

3.Element:

Represents HTML or XML elements, such as

<div>, <p>, <span>

, etc. Elements are nodes in the DOM tree.

4.Attribute:

Represents HTML or XML attributes of elements, such as id, class, src, etc. Accessed through element nodes.

5.Text Node:

Represents the text content of an element. Accessed as a child node of an element.

6.DOM Manipulation:

JavaScript is commonly used to manipulate the DOM dynamically. Methods like getElementById, querySelector, createElement, appendChild, etc., are used to select and modify elements.

Example of DOM manipulation:

<!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="myDiv">Hello, DOM!</div>

  <script>
    // Accessing and modifying the content of an element
    const myElement = document.getElementById('myDiv');
    myElement.textContent = 'Updated text!';
  </script>
</body>
</html>

In this example, the JavaScript code selects the element with the id myDiv and changes its text content.

The DOM is a fundamental concept for web development, enabling developers to create interactive and dynamic web pages by manipulating the structure and content of HTML documents using JavaScript.

Web DevelopmentHTML5Frontend DevelopmentDOM