DOM क्या है - DOM in JavaScript in Hindi

Srajan
⏰ 5 min read
🔗 Share 📄 Buy PDF Notes All Subjects

Table of Contents

Subject Video ▶

DOM in Hindi – DOM क्या है?

  • DOM का पूरा नाम Document Object Model होता है।

  • यह HTML और XML documents को represent करने का एक programming interface है।

  • जब browser किसी web page को load करता है, तब वह HTML document को पढ़कर उसका एक structure तैयार करता है जिसे DOM कहा जाता है।

  • DOM web page के सभी elements जैसे headings, paragraphs, images, buttons और links को objects के रूप में organize करता है।

  • JavaScript की मदद से DOM को access और manipulate किया जा सकता है।

  • DOM web page को dynamic और interactive बनाने में मदद करता है।

  • इसके माध्यम से HTML elements को create, modify, delete और update किया जा सकता है।

  • JavaScript DOM का उपयोग करके किसी element का text, color, style, image और attributes बदल सकती है।

  • DOM event handling को support करता है, जिसकी मदद से user actions जैसे button click, mouse movement और keyboard input को handle किया जाता है।

  • Browser जब किसी HTML page को load करता है, तब वह उसका DOM tree बनाता है।

  • DOM tree hierarchical structure को follow करता है जिसमें parent, child और sibling relationships होती हैं।

  • DOM में हर HTML tag को node कहा जाता है।

  • Modern web applications में DOM का बहुत महत्वपूर्ण उपयोग होता है क्योंकि इसके बिना interactive websites बनाना मुश्किल होता है।

  • React, Angular और Vue जैसे modern JavaScript frameworks भी internally DOM के concept पर काम करते हैं।

Features of DOM in Hindi – DOM की विशेषताएं

  • 1. Tree Structure:
    DOM document को tree structure के रूप में represent करता है।

  • 2. Dynamic Manipulation:
    HTML elements को runtime पर modify किया जा सकता है।

  • 3. Platform Independent:
    DOM किसी भी programming language के साथ काम कर सकता है।

  • 4. Event Handling:
    DOM events को handle करने की सुविधा देता है।

  • 5. Easy Navigation:
    Elements के बीच आसानी से navigate किया जा सकता है।

  • 6. Structured Representation:
    यह document को organized structure में represent करता है।

  • 7. Interactive Web Pages:
    DOM interactive websites बनाने में मदद करता है।

  • 8. Real-Time Updates:
    Page reload किए बिना content update किया जा सकता है।

Working with DOM in Hindi – DOM के साथ कार्य करना

→ Read Next: What is a Web Browser Environment in Hindi

  • Step 1: HTML Page Load होना
    जब browser किसी website को open करता है, तो सबसे पहले वह HTML file को read करता है। इसी process को “page loading” कहते हैं।

  • Step 2: DOM Tree बनना
    Browser HTML को समझने के लिए उसे एक tree structure में convert करता है। इसी structure को DOM (Document Object Model) कहा जाता है।

  • Step 3: HTML Elements Objects बन जाते हैं
    DOM में हर HTML element जैसे <p>, <h1>, <div> को एक object की तरह treat किया जाता है।

  • Step 4: JavaScript का Access लेना
    JavaScript DOM methods जैसे getElementById() का उपयोग करके elements को access करती है।

  • Step 5: Element को Modify करना
    JavaScript DOM की मदद से किसी भी element का text, color, style या content change कर सकती है।

  • Step 6: Event Handling
    जब user button click करता है, form submit करता है या mouse move करता है, तो DOM उन events को handle करता है।

  • Step 7: Instant Update
    DOM में किए गए changes browser में तुरंत दिखाई देते हैं, page reload करने की जरूरत नहीं होती। 

<p id="demo">Old Text</p>

<script>

document.getElementById("demo").innerHTML = "New Text";

</script>

  • इस example में पहले paragraph का text “Old Text” था।

  • JavaScript ने DOM की मदद से उसे “New Text” में बदल दिया।

  • इसका मतलब DOM web page को dynamic बनाता है।

Structure of the DOM Tree in Hindi – DOM Tree की संरचना

→ Also Read: Forms in JavaScript in Hindi

  • Step 1: Root Node (Document)
    DOM tree की शुरुआत document node से होती है। यह पूरे HTML page को represent करता है।

  • Step 2: HTML Node
    Document के अंदर सबसे पहला element html होता है। यह root element कहलाता है।

  • Step 3: Head और Body
    HTML के अंदर दो main parts होते हैं: head (meta information) और body (visible content)।

  • Step 4: Child Nodes
    Body के अंदर headings, paragraphs, images, buttons आदि होते हैं। ये सभी child nodes कहलाते हैं।

  • Step 5: Tree Structure
    पूरा document एक tree की तरह होता है जिसमें parent-child relationship होती है। 

<html>

  <body>

    <h1>Title</h1>

    <p>Paragraph</p>

  </body>

</html>

  • Step-by-step समझें:

  • html → सबसे ऊपर (root)

  • body → html का child

  • h1 और p → body के child elements

Nodes in the DOM in Hindi – DOM में Nodes

  • DOM tree में हर छोटी से छोटी चीज़ को node कहा जाता है।

  • Node का मतलब होता है “एक element या data का part”।

  • Step 1: Document Node
    पूरा HTML page एक document node होता है।

  • Step 2: Element Node
    हर HTML tag जैसे <p>, <h1>, <div> element node होता है।

  • Step 3: Text Node
    Tag के अंदर लिखा हुआ text text node कहलाता है।

  • Step 4: Attribute Node
    जैसे class, id, style आदि attribute nodes होते हैं।

  • Step 5: Comment Node
    HTML comments भी node माने जाते हैं लेकिन ये browser पर show नहीं होते। 

<p class="text">Hello</p>

  • इसे step-by-step समझें:

  • p → Element Node (tag)

  • class="text" → Attribute Node

  • Hello → Text Node

DOM Methods and Properties in Hindi – DOM Methods और Properties

  • DOM methods का उपयोग elements को access और manipulate करने के लिए किया जाता है।

Important DOM Methods in Hindi

  • 1. getElementById()
    यह method id के आधार पर element select करती है। 

document.getElementById("demo");

  • 2. getElementsByClassName()
    यह class name के आधार पर elements select करती है। 

document.getElementsByClassName("box");

  • 3. getElementsByTagName()
    यह HTML tag के आधार पर elements select करती है। 

document.getElementsByTagName("p");

  • 4. querySelector()
    यह पहला matching element select करती है। 

document.querySelector(".box");

  • 5. querySelectorAll()
    यह सभी matching elements select करती है। 

document.querySelectorAll("p");

Important DOM Properties in Hindi

  • 1. innerHTML:
    Element का HTML content change करने के लिए उपयोग होती है। 

document.getElementById("demo").innerHTML = "Hello";

  • 2. style:
    CSS styles change करने के लिए उपयोग होती है। 

document.getElementById("demo").style.color = "red";

  • 3. value:
    Form input values access करने के लिए उपयोग होती है। 

document.getElementById("name").value;

Real-life Examples of Using DOM in Hindi – DOM के वास्तविक उपयोग

  • 1. Form Validation:
    User input validate करने के लिए DOM का उपयोग किया जाता है।

  • 2. Dynamic Content Update:
    बिना page reload किए content बदलने के लिए DOM उपयोग होता है।

  • 3. Image Slider:
    Image galleries और sliders बनाने में DOM उपयोगी है।

  • 4. Navigation Menus:
    Dynamic menus और dropdowns बनाने में DOM का उपयोग होता है।

  • 5. To-Do List Applications:
    Tasks add और remove करने के लिए DOM methods उपयोग होती हैं।

  • 6. Online Shopping Websites:
    Cart items update करने के लिए DOM का उपयोग किया जाता है।

  • 7. Interactive Games:
    Browser-based games में DOM interactions बहुत महत्वपूर्ण होते हैं।

Advantages of DOM in Hindi – DOM के फायदे

  • 1. Dynamic Web Pages:
    Web pages को interactive बनाया जा सकता है।

  • 2. Real-Time Updates:
    Page reload किए बिना content update किया जा सकता है।

  • 3. Easy Manipulation:
    HTML और CSS को आसानी से modify किया जा सकता है।

  • 4. Better User Experience:
    Interactive interfaces user experience को improve करते हैं।

  • 5. Event Handling:
    User events आसानी से handle किए जा सकते हैं।

Disadvantages of DOM in Hindi – DOM के नुकसान

  • 1. Performance Issues:
    बड़े DOM structures performance slow कर सकते हैं।

  • 2. Memory Usage:
    Complex DOM ज्यादा memory consume करता है।

  • 3. Complex Code:
    बड़े projects में DOM manipulation code complex हो सकता है।

  • 4. Browser Compatibility:
    कुछ methods पुराने browsers में अलग behavior दिखा सकती हैं।

Frequently Asked Questions (FAQ) – DOM in Hindi

DOM एक programming interface है जो HTML document को objects के रूप में represent करता है।

DOM का पूरा नाम Document Object Model है।

HTML document का hierarchical structure DOM tree कहलाता है।

यह method id के आधार पर HTML element select करती है।

इसका उपयोग HTML content को change करने के लिए किया जाता है।

DOM tree के सभी elements, attributes और text nodes कहलाते हैं।

Dynamic websites, forms, games और interactive web applications में DOM का उपयोग होता है।

हाँ, JavaScript DOM elements को create, update और delete कर सकती है।

Srajan

✍️ Srajan

Diploma | Content Writer

•