Theory
JS page को कैसे 'देखता' है?
आप चाहते हैं FestConnect का 'Seats left: 30' किसी के register करते ही 29 पर गिरे, बिना किसी page reload के। पर आपकी JavaScript एक चीज़ है और HTML दूसरी। Code page के अंदर पहुँचकर एक ऐसा number कैसे बदलता है जिसे एक user देख रहा है?
जवाब है DOM। जब browser आपकी HTML load करता है, यह इसे सिर्फ़ paint नहीं करता, यह एक जीवित objects का tree बनाता है जो आपके tags को mirror करता है। JavaScript उस tree से बात करती है।
Theory
आपके tags का एक family tree
आपकी HTML nest करती है: <body> में एक <div> है, जिसमें एक <h1> और एक <p> है। DOM उस nesting को एक family tree में बदलता है: body एक parent है, div इसका child, h1 और p अंदर siblings। हर tag एक object-node बन जाता है जिसे आप point और edit कर सकते हैं। पूरा tree एक root object से लटकता है: document।
Theory
DOM, formally
Document Object Model (DOM) page का browser का in-memory representation है objects के एक tree के रूप में, प्रति tag एक node, `document` पर rooted।
Key ideas:
- यह memory में live page है, .html file नहीं। DOM edit करना screen को instantly update करता है; disk पर file कभी नहीं बदलती।
- हर element node की properties होती हैं जो आप पढ़ते और set करते हैं:
textContent(इसका text),innerHTML(अंदर की HTML),value(एक field का content),style(inline CSS),className,id।
Practical
Seat counter पढ़ना और बदलना
<p id="seats">Seats left: 30</p>
<script>
// grab the node (methods are the next lesson)
let el = document.getElementById("seats");
// READ a property
console.log(el.textContent); // "Seats left: 30"
// CHANGE properties: the page updates instantly
el.textContent = "Seats left: 29";
el.style.color = "crimson";
// innerHTML can inject tags (use with care)
el.innerHTML = "Seats left: <b>29</b>";
</script>
<!-- the seats.html file on disk still says 30; only the
live DOM in this browser changed. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Change कहाँ गया?
आपकी script el.textContent = "Seats left: 29" set करती है और page 29 दिखाता है। आप .html file एक editor में खोलते हैं और यह अभी भी 30 कहती है। क्या यह एक bug है? Explain कीजिए असल में क्या बदला।
Show the answer
Bug नहीं है। JavaScript ने DOM बदला, page की live copy जो browser की memory में है, तो screen 29 तक update हुई। Disk पर file original source है और DOM edits से कभी दोबारा नहीं लिखी जाती, तो यह अभी भी 30 कहती है। Page refresh कीजिए और यह file से DOM फिर से बनाता है, फिर से 30 दिखाते हुए। DOM चलता हुआ page है; file blueprint है।
Quiz
आप plain text 'Seats left: 29' एक element में डालना चाहते हैं, बिना किसी HTML tag interpret हुए। कौन सी property safe choice है?
- textContent, जो value को plain text की तरह treat करता है
- innerHTML, जो value को HTML के रूप में parse करता है
- value, जो सिर्फ़ form fields के लिए है
- style, जो CSS set करता है
Show the answer
textContent, जो value को plain text की तरह treat करता है
textContent element का text literally set करता है, कोई tag parsing नहीं, जो plain text के लिए safe और correct है (A)। innerHTML अपनी value को HTML के रूप में parse करता है, तो यह powerful है पर user input के साथ risky (यह unwanted tags/scripts inject कर सकता है) (B)। value inputs जैसे form controls के लिए है, एक <p> के लिए नहीं (C)। style CSS set करता है, content नहीं (D)। जब तक आपको specifically HTML insert करना न हो, textContent prefer कीजिए।
Watch out
DOM concept traps
1. 'इसने HTML file बदल दी': नहीं। DOM edits memory में live page बदलते हैं, source file नहीं। यह एक common misunderstanding है।
2. User input के साथ innerHTML: untrusted text को innerHTML के रूप में inject करना malicious HTML/scripts चला सकता है (एक XSS risk)। User-supplied text के लिए textContent इस्तेमाल कीजिए।
3. DOM tree को raw HTML string से confuse करना: DOM properties वाले objects है, वह text नहीं जिसे आप string methods से search करते हैं।
Theory
अगला: सही node कैसे grab करें
आपने document.getElementById("seats") को एक node grab करते देखा है, पर finder methods की family कैसे काम करती है यह नहीं। अगला lesson DOM methods cover करता है, getElementById, getElementsByName, और पुराना write/writeln, ताकि आप properties पढ़ने या बदलने से पहले reliably किसी भी element तक पहुँच सकें। यहाँ concepts, अगला methods, फिर Unit 5 सब कुछ interactive बनाता है।
Summary
Key takeaways
- DOM page को represent करता browser का live in-memory objects का tree है, प्रति tag एक node, document पर rooted।
- DOM edit करना screen को instantly update करता है पर disk पर .html file कभी नहीं बदलता।
- Element properties: textContent (text), innerHTML (inner HTML), value (form fields), style (inline CSS), className, id।
- Plain और user-supplied text के लिए innerHTML से textContent prefer कीजिए (innerHTML tags/scripts inject कर सकता है)।
- Nodes parent/child/sibling की तरह related हैं, एक family tree की तरह।
- Memory hook: DOM चलता हुआ page है, file blueprint है।