📘 Lesson · Lesson 32

DOM Introduction

DOM का परिचय

What Is the DOM

The DOM (Document Object Model) is the browser's live, object-based representation of your HTML page — and it's what JavaScript talks to in order to change the page. Here's the key idea: your HTML file is just text on disk. When the browser loads it, it builds an in-memory model of that page, turning every tag into a JavaScript OBJECT you can read and modify. Change something in the DOM, and the visible page updates instantly. This chapter is where everything you've learned — variables, functions, objects, loops — finally connects to real web pages.

The DOM Tree — a family of nested elements

<html>
  <body>
    <h1>Title</h1>
    <div>
      <p>Hello</p>
    </div>
  </body>
</html>

Becomes this TREE:

        html
         |
        body
       /    \
      h1     div
      |       |
   "Title"    p
              |
           "Hello"

The browser arranges your HTML into a tree structure, because HTML tags nest inside one another. Every element becomes a node in this tree, with family relationships: body is the PARENT of h1 and div; those two are SIBLINGS; p is a CHILD of div. This family terminology (parent, child, sibling, ancestor, descendant) is used constantly in DOM work — and you already met it in CSS selectors. Understanding that the page is a tree explains how JavaScript navigates from one element to another.

The document Object — your entry point

console.log(document);              // the whole page as an object
console.log(document.title);        // the page's title
console.log(document.body);         // the body element

document.title = "New Title";       // ← changes the browser tab instantly!

// Everything DOM-related starts with "document."
document.getElementById("demo");
document.querySelector(".card");

document is a built-in object representing the entire web page — it's the doorway to the DOM. Every time you want to find, change, or create an element, you start from document. It's provided by the browser automatically; you never create it. Try console.log(document) in your browser console right now and you'll see your whole page as an inspectable object. Setting document.title changes the tab text immediately — your first taste of JavaScript altering the live page.

Nodes and Elements — a useful distinction

<p>Hello <b>world</b></p>

// In the DOM this contains:
//   • an ELEMENT node   → <p>
//   • a TEXT node       → "Hello "
//   • an ELEMENT node   → <b>
//   • a TEXT node       → "world"

Everything in the DOM tree is a "node," but not every node is an "element." Element nodes are the HTML tags (<p>, <div>). Text nodes are the text INSIDE tags. There are also comment nodes and attribute nodes. Why does this matter? Because some DOM properties give you all nodes (including whitespace text!) while others give you only elements — for instance childNodes versus children. When a DOM result contains surprising extra items, stray text nodes are usually why. In practice you'll work with ELEMENT nodes almost exclusively.

What the DOM Lets You Do

Find elements: grab any element by id, class, or CSS selector.
Change content: update text and HTML inside an element.
Change styles: alter colours, sizes, and add or remove CSS classes.
Change attributes: swap an image's src, a link's href.
Create and delete elements: add new list items, remove a card.
React to events: run code when a button is clicked or a form submitted.

This list is essentially the job description of front-end JavaScript. Every interactive feature you've ever used — a dropdown opening, a like counter incrementing, a form showing a validation error, items being added to a cart — is JavaScript reading and modifying the DOM. The next six chapters walk through each of these abilities in turn: selecting elements, changing them, creating them, and responding to events. This is where JavaScript stops being abstract and starts building real things.

Exam Corner

Q: What does DOM stand for? Document Object Model.

Q: What is the DOM? The browser's object-based, in-memory representation of the HTML page, which JavaScript can modify.

Q: Why is the DOM called a tree? Because HTML elements nest inside each other, forming parent–child relationships.

Q: What is the document object? The built-in object representing the whole page — the entry point to the DOM.

Q: Difference between a node and an element? All elements are nodes, but nodes also include text and comment nodes.

DOM क्या है

DOM (Document Object Model) आपके HTML page का browser का जीवंत, object-आधारित प्रतिनिधित्व है — और JavaScript page बदलने के लिए इसी से बात करता है. मुख्य विचार: आपकी HTML file बस disk पर text है. जब browser उसे load करता है, वह उस page का in-memory model बनाता है, हर tag को JavaScript OBJECT में बदलते जिसे आप पढ़ और बदल सकते हैं. DOM में कुछ बदलिए, और दिखने वाला page तुरंत update होता है. यह chapter वहीं है जहां आपका सीखा सब कुछ — variables, functions, objects, loops — आखिरकार असली web pages से जुड़ता है.

DOM Tree — nested elements का परिवार

<html>
  <body>
    <h1>Title</h1>
    <div>
      <p>Hello</p>
    </div>
  </body>
</html>

Yeh TREE banta hai:

        html
         |
        body
       /    \
      h1     div
      |       |
   "Title"    p
              |
           "Hello"

Browser आपके HTML को tree structure में व्यवस्थित करता है, क्योंकि HTML tags एक-दूसरे के अंदर nest होते हैं. हर element इस tree में node बनता है, पारिवारिक रिश्तों के साथ: body h1 और div का PARENT है; वे दोनों SIBLINGS हैं; p div का CHILD है. यह पारिवारिक शब्दावली (parent, child, sibling, ancestor, descendant) DOM काम में लगातार use होती है — और आप इसे CSS selectors में मिल चुके. Page tree है यह समझना बताता है JavaScript एक element से दूसरे तक कैसे navigate करता है.

document Object — आपका प्रवेश द्वार

console.log(document);              // poora page object ke roop me
console.log(document.title);        // page ka title
console.log(document.body);         // body element

document.title = "New Title";       // ← browser tab turant badalta hai!

// Har DOM-sambandhi cheez "document." se shuru hoti hai
document.getElementById("demo");
document.querySelector(".card");

document built-in object है जो पूरे web page को दर्शाता है — यह DOM का दरवाज़ा है. जब भी आप element ढूंढना, बदलना, या बनाना चाहें, आप document से शुरू करते हैं. यह browser अपने आप देता है; आप इसे कभी नहीं बनाते. अभी अपने browser console में console.log(document) आज़माइए और आप अपना पूरा page inspectable object के रूप में देखेंगे. document.title set करना tab text तुरंत बदलता है — JavaScript द्वारा जीवंत page बदलने का आपका पहला स्वाद.

Nodes और Elements — उपयोगी भेद

<p>Hello <b>world</b></p>

// DOM me isme shamil hai:
//   • ELEMENT node   → <p>
//   • TEXT node      → "Hello "
//   • ELEMENT node   → <b>
//   • TEXT node      → "world"

DOM tree की हर चीज़ "node" है, पर हर node "element" नहीं. Element nodes HTML tags हैं (<p>, <div>). Text nodes tags के ANDAR का text हैं. Comment nodes और attribute nodes भी हैं. यह क्यों मायने रखता है? क्योंकि कुछ DOM properties आपको सारे nodes देती हैं (whitespace text भी!) जबकि दूसरी सिर्फ elements — जैसे childNodes बनाम children. जब DOM नतीजे में आश्चर्यजनक अतिरिक्त items हों, आमतौर पर भटके text nodes कारण होते हैं. व्यवहार में आप लगभग पूरी तरह ELEMENT nodes के साथ काम करेंगे.

DOM से क्या कर सकते हैं

Elements ढूंढना: किसी भी element को id, class, या CSS selector से पकड़ना.
Content बदलना: element के अंदर text और HTML update करना.
Styles बदलना: colours, sizes बदलना, और CSS classes जोड़ना या हटाना.
Attributes बदलना: image का src, link का href बदलना.
Elements बनाना और हटाना: नए list items जोड़ना, card हटाना.
Events पर प्रतिक्रिया: button click या form submit होने पर code चलाना.

यह list मूलतः front-end JavaScript का job description है. हर interactive feature जो आपने कभी use किया — dropdown खुलना, like counter बढ़ना, form का validation error दिखाना, cart में items जुड़ना — JavaScript का DOM पढ़ना और बदलना है. अगले छह chapters इनमें से हर क्षमता पर बारी-बारी चलते हैं: elements select करना, उन्हें बदलना, बनाना, और events का जवाब देना. यहीं JavaScript अमूर्त होना बंद करके असली चीज़ें बनाना शुरू करता है.

Exam Corner

Q: DOM का full form क्या है? Document Object Model.

Q: DOM क्या है? HTML page का browser का object-आधारित, in-memory प्रतिनिधित्व, जिसे JavaScript बदल सकता है.

Q: DOM को tree क्यों कहते हैं? क्योंकि HTML elements एक-दूसरे के अंदर nest होते हैं, parent–child रिश्ते बनाते.

Q: document object क्या है? पूरे page को दर्शाने वाला built-in object — DOM का प्रवेश द्वार.

Q: Node और element में अंतर? सारे elements nodes हैं, पर nodes में text और comment nodes भी शामिल हैं.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.