पिछले कुछ Articles में हमने jQuery Framework को अपने Web Page में Include करने से सम्बंधित दो तरीकों के बारे में तथा jQuery Development से सम्बंधित विभिन्न प्रकार के Tools व IDEs के बारे में विस्तार से जाना और अब हम इस स्थिति में हैं कि हम jQuery के Fundamental Internals को समझते हुए Client Side Development की शुरूआत कर सकें। तो चलिए, शुरू करते हैं jQuery Development और बनाते हैं अपने Web Pages को ज्यादा Interactive, ज्यादा Effective वो भी कम से कम Codes द्वारा।
The DOM (Document Object Model)
DOM एक Application Programming Interface (API) है, जिसे XML के लिए Define किया गया था ताकि HTML Documents को Extend किया जा सके। DOM किसी भी Document को Memory में Nodes की एक Hierarchy के रूप में Model करता है। HTML या XML Document का हर Element या Tag, Attribute व Text आदि DOM के Nodes को Represent करते हैं।
सरल शब्दों में कहें तो जब कोई Web Page, Web Browser में Load हो जाता है, तब उस Web Page के सभी Elements एक Hierarchy के रूप में Memory में Organize हो जाते हैं। Memory में Organized Web Page की इसी Hierarchy को DOM Tree या Document Object Model Tree कहा जाता है।
DOM Tree में HTML Page का हर Element किसी दूसरे Element से Related होता है। इसलिए DOM Tree के विभिन्न Elements के बीच की आपसी Relationship को Represent करने के लिए सामान्यत: Family Relationship Model को Use किया जाता है। DOM Tree के Concept को समझने के लिए हम एक उदाहरण देखते हैं, जो कि निम्नानुसार है:
//File Name: DOMTree.html
<html>
<head>
<title>DOM Basics for JQuery</title>
</head>
<body>
<h1>This is heading1</h1>
<p>This is first paragraph.
<a href=”#”>This is first anchor</a>
<a href=”#”>This is first anchor</a>
<a href=”#”>This is first anchor</a>
</p>
</body>
</html>
- इस Coding में html Element Root Element है, जिसके दो Child Element head व body हैं, जबकि html Element, head व body Element का Parent Element है।
- इसी तरह से h1, p व a Elements, body Element के Child Elements है, जबकि body Element, इन सभी h1, p व a Element का Parent Element है।
- जबकि body व head Elements आपस में Siblings हैं क्योंकि इन दोनों Elements का Parent Element समान यानी html Element है।
जब ये HTML Web Page, Web Browser में Load होता है, तो सबसे पहले इसका In-Memory Representation Create होता है यानी DOM Tree Create होता है। परिणामस्वरूप इस HTML Code को DOM Tree Structure के रूप में हम निम्नानुसार Represent कर सकते हैं:
किसी Document के विभिन्न Elements के Memory में इस तरह से Store होकर Model होने की व्;वस्था को ही DOM या Document Object Model कहा जाता है, जिसमें Document के विभिन्न Elements, DOM के एक Node को Represent करते हैं और हर Node एक Object की तरह व्यवहार करता है, जिसकी स्वयं की कुछ Properties व Behaviors होते हैं।
Document के विभिन्न Contents की एक Tree बनाकर DOM, किसी Web Developer को अपने Document पर पूरी तरह से Control करने की सुविधा प्रदान करता है क्योंकि JavaScript जैसी किसी Scripting Language या jQuery जैसे किसी Framework का प्रयोग करके Web Developer अपने Document के किसी Node को Remove कर सकता है, DOM में नया Node Add कर सकता है, किसी अवांछित Node को Replace कर सकता है अथवा किसी Node को Modify कर सकता है।
चूंकि Web Browser में Document Render होने से पहले उस Document का DOM Tree Create होता है, जो कि उस Document का In-Memory Model होता है और Web Browser के Window में वही दिखाई देता है, जो DOM Tree में होता है, इसलिए DOM में कि, जाने वाले परिवर्तनों का Effect तुरन्त Web Browser में Reflect होता है।
अत: DOM Tree किसी भी Client Side Scripting Language के लिए एक मुख्य Source होता है, जिस पर वह JavaScript जैसा Scripting Language विभिन्न प्रकार के Operations Perform करके Document को ज्यादा Interactive बनाने में सक्षम हो पाता है।
DOM वास्तव में एक Standard है, जो कि W3C द्वारा Develop किया गया है। W3C द्वारा इस DOM के आज तक कुल तीन Levels Define कि, गए हैं और तीनों ही Specifications में DOM API के रूप में बहुत सारी Properties व Methods को Define किया गया है।
DOM के बारे में और अधिक विस्तार से जानने के लिए आप हमारी “Advance JavaScript in Hindi” पुस्तक पढ सकते हैं, जिसमें DOM Level 0, DOM Level 1, DOM Level 2 व DOM Level 3 द्वारा Specified विभिन्न DOM APIs को विस्तार से समझाया गया है। (How jQuery Works Internally)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
