← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 18 of 26

JS का DOM

किसी family tree diagram के बारे में सोचें, हर व्यक्ति अपने parents, children, और siblings से एक साफ, branching structure में जुड़ा होता है, और आप उस tree से किसी भी व्यक्ति से किसी दूसरे तक का रास्ता ढूंढ सकते हैं। DOM, यानी Document Object Model, बिल्कुल वैसा ही tree है, पर एक webpage के लिए, हर HTML element एक connected node बन जाता है, और JavaScript page चलने के दौरान उस पूरी structure में घूम सकता है, उसे पढ़ सकता है, और बदल सकता है। cookiescursor.com पर हर dynamic feature, किसी paragraph का text update करने से लेकर एक पूरा नया section जोड़ने तक, आखिरकार JavaScript के इसी DOM tree के साथ interact करने पर आ टिकता है।

In this page:

  1. DOM क्या है
  2. document Object
  3. DOM Tree Structure
  4. Elements को Select करना (Preview)
  5. DOM Manipulation की बुनियादी बातें
Syntax
javascript 
document.getElementById("id");
document.querySelector("selector");
element.textContent = value;
element.style.property = value;

DOM क्या है

DOM किसी HTML page का एक live, in-memory tree representation है, जहाँ हर element, attribute, और text का टुकड़ा एक connected node बन जाता है जिसे JavaScript सीधे पढ़ और बदल सकता है।

Note: DOM raw HTML file जैसा नहीं है, यह एक dynamic structure है जिसे browser बनाता है और JavaScript के page बदलने पर update रखता है।
Warning: चूंकि JavaScript चलने के बाद DOM original HTML से अलग हो सकता है, कुछ tools में किसी page का source देखने पर original file दिखती है, मौजूदा live DOM नहीं।

उदाहरण: What Is the DOM

javascript 
console.log(document); // the live in-memory tree of the page

document Object

document पूरे loaded page को represent करने वाला built-in object है, जो लगभग हर DOM operation के लिए शुरुआती बिंदु का काम करता है, elements ढूंढना, properties पढ़ना, या नया content बनाना।

Note: document.title और document.URL current page की बुनियादी जानकारी पढ़ने के लिए जल्दी, आमतौर पर इस्तेमाल होने वाली properties हैं।
Warning: document सिर्फ उसी page को दिखाता है जिस पर वह चल रहा है, scripts इसका इस्तेमाल किसी बिल्कुल अलग page या origin तक पहुंचने या उसे बदलने के लिए नहीं कर सकते।

उदाहरण: The document Object

javascript 
console.log(document.title);
console.log(document.body);

DOM Tree Structure

DOM किसी page को hierarchically organize करता है, सबसे ऊपर document, उसके बाद html, फिर head और body, और हर nested element उसी parent-child relationship को individual text content तक आगे बढ़ाता है।

Note: DOM tree में parent, child, और sibling relationships को समझना तब बहुत मदद करता है जब आप किसी मौजूदा element के relative आसपास के elements को navigate या manipulate कर रहे हों।
Warning: आपके HTML में whitespace और line breaks भी DOM tree में अपने खुद के text nodes बन सकते हैं, जो कभी-कभी child counting को प्रभावित करते हैं।

उदाहरण: The DOM Tree Structure

javascript 
// document -> html -> head/body -> nested elements -> text
console.log(document.documentElement.tagName); // "HTML"

Elements को Select करना (Preview)

किसी element को manipulate करने से पहले, आपको पहले उसे DOM से select करना होगा, getElementById() या querySelector() जैसे methods से, जिन्हें अगले chapter में DOM methods पर पूरी गहराई से कवर किया गया है।

Note: किसी element को select करना अपने आप page पर कुछ नहीं बदलता, यह बस आपके script को बाद में काम करने के लिए एक reference दे देता है।
Warning: ऐसे element को select करने की कोशिश करना जो अभी page में जुड़ा ही नहीं है, आपकी उम्मीद के element के बजाय null देता है।

उदाहरण: Selecting Elements (Preview)

javascript 
const el = document.getElementById("demo"); // preview of the next chapter
console.log(el);

DOM Manipulation की बुनियादी बातें

किसी element के select हो जाने के बाद, JavaScript उसके text, attributes, styles, या structure को सीधे बदल सकता है, और ये बदलाव बिना किसी reload के तुरंत page पर दिखाई देते हैं, यही interactive web pages की बुनियाद है।

Note: JavaScript की एक साधारण line भी, जैसे textContent बदलना, technically DOM manipulation ही है, वही underlying mechanism कहीं ज़्यादा जटिल interactive features के पीछे भी काम करता है।
Warning: DOM manipulation के बदलाव तुरंत दिखते हैं, पर वे सिर्फ browser की memory में मौजूद होते हैं, page refresh करने पर वे खो जाते हैं जब तक उन्हें कहीं save न किया गया हो।

उदाहरण: DOM Manipulation Basics

javascript 
document.body.style.color = "blue";
document.title = "Updated Title";
Live Example
Related Topics

JS DOM मेथड्स · JS एसिंक/अवेट · JS प्रॉमिसेस · JS एडवांस्ड Events

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. page के DOM elements को पूरी तरह load करने से पहले access करने की कोशिश करना, जिससे उम्मीद किए गए element के बजाय null मिलता है।
  2. DOM tree को original HTML source से confuse करना, DOM को JavaScript से modify किया जा सकता है और अब यह initial HTML से exactly match नहीं करता।
  3. यह मान लेना कि हर visible change को page reload चाहिए, DOM manipulation किसी reload के बिना screen पर मौजूद चीज़ को instantly update कर देता है।
चैप्टर सारांश
  • DOM किसी HTML page को connected node objects के एक tree की तरह represent करता है जिसे JavaScript पढ़ और modify कर सकता है।
  • document object पूरे DOM tree को access और उससे interact करने का entry point है।
  • DOM manipulation, JavaScript से text, attributes, या structure बदलना, वही है जो pages को dynamic और interactive महसूस कराता है।
ब्राउज़र सपोर्ट

DOM और document object core, universal web platform features हैं जो हर browser में समान रूप से supported हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Async Parallel Next Lesson → JS DOM Navigation

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.