JavaScript DOM - Complete Hindi Tutorial | वेब डेवलपमेंट गाइड

JavaScript DOM: (Document Object Model)

इस ट्यूटोरियल में हम JavaScript DOM (Document Object Model) के बारे में सब कुछ सीखेंगे - बेसिक्स से लेकर एडवांस्ड कॉन्सेप्ट्स तक। यह गाइड beginners और experienced developers दोनों के लिए उपयोगी है।

DOM क्या है? (What is DOM?)

DOM (Document Object Model) एक प्रोग्रामिंग इंटरफेस है जो HTML और XML documents को ट्री स्ट्रक्चर में रिप्रेजेंट करता है। यह JavaScript को वेब पेज के कंटेंट, स्ट्रक्चर और स्टाइल को डायनामिकली एक्सेस और मॉडिफाई करने की अनुमति देता है।

DOM ट्री स्ट्रक्चर उदाहरण:

<html>
  <head>
    <title>DOM ट्यूटोरियल</title>
  </head>
  <body>
    <h1>DOM सीखें</h1>
    <p id="demo">यह एक पैराग्राफ है</p>
  </body>
</html>

इसका DOM ट्री कुछ ऐसा दिखेगा:

- document (root)
  - html
    - head
      - title
        - "DOM ट्यूटोरियल"
    - body
      - h1
        - "DOM सीखें"
      - p (id="demo")
        - "यह एक पैराग्राफ है"

DOM Methods और Properties

1. DOM Elements को Select करना

Method	विवरण	उदाहरण
`getElementById()`	ID से element select करें	`document.getElementById("demo")`
`querySelector()`	CSS selector से पहला element लें	`document.querySelector("p")`
`querySelectorAll()`	सभी matching elements लें	`document.querySelectorAll(".class")`
`getElementsByClassName()`	Class name से elements लें	`document.getElementsByClassName("box")`
`getElementsByTagName()`	Tag name से elements लें	`document.getElementsByTagName("div")`

2. DOM Content Modify करना

Property/Method	विवरण	उदाहरण
`innerHTML`	HTML content set/return करें	`element.innerHTML = "<b>Hello</b>"`
`textContent`	Text content set/return करें	`element.textContent = "नमस्ते"`
`setAttribute()`	Attribute add/update करें	`element.setAttribute("class", "active")`
`style`	CSS styling change करें	`element.style.color = "red"`

प्रैक्टिकल DOM Manipulation उदाहरण

1. Button Click पर Text Change करना

मूल टेक्स्ट

<button onclick="changeText()">क्लिक करें</button>
<p id="demo">मूल टेक्स्ट</p>

<script>
  function changeText() {
    document.getElementById("demo").textContent = "टेक्स्ट बदल गया!";
  }
</script>

2. Dynamic List बनाना

<ul id="list"></ul>
<button onclick="addItem()">आइटम जोड़ें</button>

<script>
  function addItem() {
    let ul = document.getElementById("list");
    let li = document.createElement("li");
    li.textContent = "नया आइटम " + (ul.children.length + 1);
    ul.appendChild(li);
  }
</script>

DOM Events Handling

Event Listeners जोड़ना

document.getElementById("btn").addEventListener("click", function() {
  alert("बटन दबाया गया!");
});

DOM Traversing (Parent/Child Access)

Method	विवरण	उदाहरण
`parentNode`	Parent element लें	`child.parentNode`
`children`	सभी child elements लें	`parent.children`
`firstChild`	पहला child लें	`parent.firstChild`
`nextSibling`	अगला sibling element लें	`item.nextSibling`

Advanced DOM Concepts

1. Event Delegation

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    e.target.remove();
  }
});

2. localStorage के साथ DOM Update

// Data save करना
localStorage.setItem("theme", "dark");

// Data retrieve करना
let theme = localStorage.getItem("theme");
document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";

Performance Tips (DOM Optimization)

कम DOM Manipulation करें - बार-बार DOM update करने से बचें
Event Delegation का उपयोग करें - Multiple event listeners की जगह एक parent पर listener लगाएं

querySelectorAll के बाद forEach का उपयोग करें

document.querySelectorAll(".items").forEach(item => {
  item.style.color = "blue";
});

Conclusion

DOM JavaScript का सबसे important concept है जिससे आप वेब पेज को dynamically control कर सकते हैं। इस गाइड में हमने सीखा:

DOM क्या है और यह कैसे काम करता है
Elements select और modify करना
Event handling
Dynamic HTML/CSS manipulation
Performance optimization tips

अभ्यास के लिए: एक To-Do List बनाएं जहां आप:

नए items add कर सकें
Items delete कर सकें
localStorage में data save कर सकें

JavaScript Document Object Model क्या है? (What is DOM?)