Previous Next

JavaScript Objects in Hindi

Document Object Model (DOM)

JavaScript में जब कोई HTML page browser में load होता है, तो browser उस HTML document की एक structured representation बनाता है। इस representation को Document Object Model (DOM) कहा जाता है। DOM की मदद से JavaScript HTML page के elements को access, modify, add और remove कर सकता है।

Simple words में समझें तो DOM JavaScript और HTML के बीच एक bridge की तरह काम करता है। HTML page का structure browser DOM में convert करता है और फिर JavaScript उस DOM के माध्यम से page में बदलाव कर सकता है।

उदाहरण के लिए, अगर किसी HTML page में एक heading है और हम चाहते हैं कि button पर click करने के बाद उस heading का text बदल जाए, तो JavaScript DOM की मदद से उस heading को access करके उसका text बदल सकती है।

DOM Tree क्या होता है?

DOM को एक tree structure की तरह समझा जा सकता है। HTML document का सबसे ऊपर वाला element <html> होता है। इसके अंदर सामान्यतः <head> और <body> होते हैं। इनके अंदर मौजूद elements DOM tree में अलग-अलग nodes के रूप में दिखाई देते हैं।

उदाहरण के लिए:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my website.</p>
  </body>
</html>

इस structure में <html> root element है। <head> और <body> उसके child elements हैं। इसी तरह <h1> और <p> body के अंदर मौजूद child nodes हैं।

DOM का document Object

JavaScript में DOM के साथ काम करने के लिए सबसे important object document है। यह current HTML document को represent करता है। इसके methods और properties की मदद से हम HTML elements को find और modify कर सकते हैं।

उदाहरण के लिए, अगर page में mainHeading नाम की ID वाला heading element मौजूद है, तो उसे इस तरह access किया जा सकता है:

JavaScript

Code copied!

ऊपर document.getElementById() method की मदद से उस HTML element को select किया गया है जिसकी id mainHeading है।

getElementById() से Element को Access करना

getElementById() DOM का एक commonly used method है। इसका उपयोग किसी specific ID वाले element को select करने के लिए किया जाता है। एक HTML document में किसी ID को normally unique रखा जाता है।

JavaScript

Code copied!

DOM से HTML Content बदलना

Element को select करने के बाद JavaScript की मदद से उसका content भी बदला जा सकता है। इसके लिए textContent या innerHTML का उपयोग किया जा सकता है।

textContent का उपयोग plain text बदलने के लिए किया जाता है, जबकि innerHTML के माध्यम से element के अंदर HTML content भी set किया जा सकता है।

JavaScript

Code copied!

HTML Element की Style बदलना

DOM की मदद से JavaScript किसी element की CSS style को भी dynamically बदल सकती है। इसके लिए style property का उपयोग किया जा सकता है।

JavaScript

Code copied!

DOM में Elements को Select करने के तरीके

DOM में किसी element को select करने के लिए केवल getElementById() ही नहीं, बल्कि कई दूसरे methods भी उपलब्ध हैं। इनमें कुछ important methods हैं:

getElementById() – ID के आधार पर एक element select करता है।
getElementsByClassName() – दिए गए class name वाले elements को select करता है।
getElementsByTagName() – किसी HTML tag के आधार पर elements select करता है।
querySelector() – CSS selector के आधार पर पहला matching element select करता है।
querySelectorAll() – CSS selector से match होने वाले सभी elements को select करता है।

Modern JavaScript में querySelector() और querySelectorAll() काफी useful हैं क्योंकि इनमें CSS selectors का उपयोग किया जा सकता है।

JavaScript

Code copied!

DOM Events

DOM की एक बहुत important feature event handling है। User जब किसी webpage पर कोई action करता है, तो उसे event कहा जा सकता है। जैसे button पर click करना, input में typing करना, mouse को move करना या keyboard की key दबाना।

JavaScript DOM की मदद से इन events को detect करके कोई action perform कर सकती है। उदाहरण के लिए button click होने पर alert दिखाया जा सकता है।

JavaScript

Code copied!

addEventListener() का उपयोग

Events handle करने का एक और common और flexible तरीका addEventListener() है। इससे हम किसी element पर किसी specific event के लिए function attach कर सकते हैं।

JavaScript

Code copied!

DOM में नया Element बनाना

DOM की मदद से JavaScript केवल existing elements को modify ही नहीं करती, बल्कि नए HTML elements भी create कर सकती है। इसके लिए document.createElement() का उपयोग किया जाता है। इसके बाद appendChild() जैसे methods की मदद से नए element को page में add किया जा सकता है।

JavaScript

Code copied!

DOM से Element हटाना

JavaScript DOM के माध्यम से किसी existing element को page से remove भी कर सकती है। Modern JavaScript में remove() method इसका simple तरीका है।

JavaScript

Code copied!

DOM में Attributes बदलना

DOM की मदद से HTML elements के attributes को भी change किया जा सकता है। इसके लिए setAttribute(), getAttribute() और removeAttribute() जैसे methods का उपयोग किया जा सकता है।

उदाहरण के लिए किसी image का src या link का href JavaScript से dynamically बदला जा सकता है।

JavaScript

Code copied!

DOM का Practical Example

Real websites में DOM का उपयोग बहुत common है। जैसे login form के बाद message दिखाना, button click पर menu open करना, dark mode बदलना, form validation करना, counter बनाना, shopping cart update करना और बिना पूरा page reload किए content बदलना आदि।

नीचे एक simple example है जिसमें button पर click करने के बाद heading का text और color दोनों बदल जाते हैं।

JavaScript

Code copied!

DOM के Common Methods

Method / Property	काम
getElementById()	ID के आधार पर element select करता है।
querySelector()	CSS selector से पहला matching element select करता है।
querySelectorAll()	सभी matching elements select करता है।
textContent	Element का text पढ़ने या बदलने के लिए।
innerHTML	Element के अंदर HTML content पढ़ने या बदलने के लिए।
style	Element की inline CSS style बदलने के लिए।
createElement()	नया HTML element बनाने के लिए।
appendChild()	नए child element को जोड़ने के लिए।
remove()	Element को DOM से हटाने के लिए।
addEventListener()	किसी event पर function चलाने के लिए।

DOM के फायदे

HTML elements को dynamically change किया जा सकता है।
Page के content को बिना पूरा reload किए update किया जा सकता है।
User interactions और events को handle किया जा सकता है।
नए HTML elements dynamically create किए जा सकते हैं।
Existing elements और attributes को modify या remove किया जा सकता है।
Interactive और dynamic web applications बनाने में मदद मिलती है।

DOM और JavaScript का Relationship

JavaScript और DOM एक ही चीज नहीं हैं। JavaScript एक programming language है, जबकि DOM browser द्वारा HTML document की बनाई गई object-based representation है। JavaScript DOM APIs का उपयोग करके webpage के structure, content, style और events के साथ interact करती है।

इसी कारण DOM को समझना JavaScript के साथ frontend web development सीखने के लिए बहुत important है। जब आपको DOM methods और events की अच्छी understanding हो जाती है, तब आप interactive buttons, forms, menus, calculators, counters, validation और कई तरह के dynamic web interfaces बना सकते हैं।

Important Points

DOM का पूरा नाम Document Object Model है।
Browser HTML document को DOM structure में represent करता है।
document DOM के साथ काम करने का main object है।
getElementById() किसी ID के आधार पर element select करता है।
querySelector() और querySelectorAll() CSS selectors के साथ काम करते हैं।
DOM की मदद से content, style और attributes को dynamically बदला जा सकता है।
DOM के द्वारा नए elements create और existing elements remove किए जा सकते हैं।
Events के माध्यम से webpage को interactive बनाया जा सकता है।

Conclusion

DOM JavaScript का एक बहुत important concept है जो JavaScript को HTML page के साथ interact करने की सुविधा देता है। DOM की मदद से हम elements को select कर सकते हैं, उनका content और style बदल सकते हैं, attributes modify कर सकते हैं, नए elements create कर सकते हैं और user events को handle कर सकते हैं।

अगर आप JavaScript से interactive websites या web applications बनाना चाहते हैं, तो DOM selectors, properties, methods और events को अच्छी तरह समझना बहुत जरूरी है।

Previous Next

Code copied!

Page Views

Visit ID

Not tracked yet

Visit Time

Time on Page

0 seconds

Request

Full Name *

Email Address *

Mobile Number

Message *

INITIALIZING...