🌐 Introduction to DOM (Document Object Model)

Last Updated: 25th October 2025

  • DOM (Document Object Model) is a programming interface that allows JavaScript to access, modify, and manipulate the content, structure, and style of a webpage.
  • When a web page loads, the browser converts the HTML document into a DOM tree — a hierarchical structure of elements.

Hinglish Tip 🗣: DOM ko samjho jaise ek tree structure jisme HTML ke sab elements ek “family” ke members hain — JavaScript unse baat kar sakta hai, unhe badal sakta hai, hata sakta hai ya naya add kar sakta hai.

🌳 DOM Tree Structure

Every HTML document is represented as a tree (hierarchy):

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello DOM</h1>
    <p>Welcome to the DOM tutorial.</p>
  </body>
</html>

Browser converts it into DOM tree, where each tag (<h1>, <p>, <div>) becomes a node (element node).

Types of DOM Nodes

  • Document Node (e.g., <!DOCTYPE html>)
  • Element Node (e.g., <h1>, <p>, <div>)
  • Text Node (e.g., "Hello DOM")
  • Attribute Node (e.g., class="container")
  • Processing Instruction Node (e.g., <?xml version="1.0"?>)
  • Comment Node (e.g., <!-- This is a comment -->)

Common DOM Selectors

  • getElementById(): Selects an element by its id attribute.
  • getElementsByClassName(): Selects elements by their class attribute.
  • getElementsByTagName(): Selects elements by their tag name.
  • querySelector(): Selects the first element that matches a CSS selector.
  • querySelectorAll(): Selects all elements that match a CSS selector.

Note: We will cover these methods in detail in the next section.

← PreviousNext →