HTML DOM Hierarchy: जब कोई HTML Document Web Browser में Load होता है, तो Render होने से पहले उस HTML Document के सभी Elements की एक Tree बनती है, जो Web Browser की Memory में तब तक Stored रहती है, जब तक HTML Document, Web Browser में Loaded रहता है। HTML Document के विभिन्न Elements की Tree रूपी Memory Organization को HTML DOM कहा जाता है तथा HTML Document के सभी Elements, HTML DOM का Part बनने के बाद Object कहलाते हैं।
किसी HTML Document के सभी Elements आपस में एक दूसरे से Related व Connected होते हैं, इसलिए इन Elements को हम एक Hierarchy के रूप में Represent कर सकते हैं। इस Hierarchy को हम एक Family Tree या Family Hierarchy के रूप में भी समझ सकते हैं। उदाहरण के लिए निम्न HTML Document को देखिएः
<!DOCTYPE html> <html> <body> <div class="div1"> <h1>Heading 1</h1> <table> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </table> <p>This is a paragraph in div1.</p> </div> <div class="div2"> <h1>Heading 2</h1> <p> This is a paragraph in div2</p> <ol>An ordered list <li>First element <li>Second element <li>Third element </ol> </div> </body> </html>
इस चित्र में हम उपरोक्त HTML Document का DOM Representation देख सकते हैं। किसी HTML Document के DOM Representation में विभिन्न Elements आपस में जिस तरह से जुडे होते हैं, उन्हें कुछ Specific Words से Represent करते हैं। ये Words Family Hierachy से Related Words हैं, इसलिए आसानी से समझ में आ जाते हैं कि किस Element Object का किसी दूसरे Element Object के साथ किस प्रकार का संबंध है। साथ ही हम यहां जिन शब्दों को उपयोग में लेते हैं, CSS व Stylesheet में भी वे शब्द उसी तरह से किसी Element को Identify करने के लिए उपयोग में लिए जाते हैं।
Ancestors
उपरोक्त चित्र के अनुसार
- body Element, div1 व div2 Element का Ancestor है। जबकि अन्य सभी Elements भी इसके अन्दर ही Nested हैं, इसलिए ये सभी अन्य Elements का Root Level का Ancestor है।
- div1 Element, h1, table व p Element का Ancestor है। साथ ही ये सभी td व tr Elements का भी Ancestor है।
- div2 Element, h1, p व ol Element का Ancestor है। साथ ही ये li Element का भी Ancestor है।
- table Element, दोनों tr Elements व td Elements का Ancestor हैं।
- दोनों tr Elements, क्रमशः दो-दो td Elements के Ancestor हैं।
- ol Element तीनों li Elements का Ancestor है।
यानी किसी Element X के अन्दर Nested सभी Elements व सभी Levels के Elements के लिए X Element Ancestor होता है।
CSS के अनुसार किसी Element का Parent, Grand Parent, Great Grand Parent और इसी तरह से Hierarchy की शुरूआत तक के जितने भी Elements होते हैं, वे सभी Current Element के Ancestor होते हैं।
Descendants
उपरोक्त चित्र के अनुसार
- सभी Elements, body Element के Descendent है।
- div1 के अन्दर Nested सभी Elements (h1, table, p, tr, td) div1 के Descendants हैं।
- div2 के अन्दर Nested सभी Elements (h1, table, p, ol, li) div2 के Descendent हैं।
- h1, p व ol Elements, div2 Element के Descendent हैं।
- दोनों tr Elements व उनके td Elements, table Element के Descendent हैं।
- दोनों tr Elements के क्रमशः दोनों td Elements के Descendent हैं।
- तीनों li Elements, ol Element के Descendent हैं।
यानी किसी Element X के अन्दर Nested सभी Elements, Element X के लिए Descendent होते हैं।
CSS के अनुसार किसी Element के ले लिए उसके सभी Child, Grand Child, Great Grand Child और इसी तरह से Hierarchy की अन्त तक के जितने भी Elements होते हैं, वे सभी Current Element के Descendants होते हैं।
Parent
उपरोक्त चित्र के अनुसार
- body Element, div1 व div2 Element का Parent है।
- div1 Element, h1, table व p Element का Parent है।
- div2 Element, h1, p व ol Element का Parent है।
- दोनों tr Elements, क्रमशः दो-दो td Elements के Parent हैं।
- ol Element तीनों li Elements का Parent है।
यानी किसी Element X के अन्दर Nested सभी Elements के लिए X Element Parent होता है।
Children
उपरोक्त चित्र के अनुसार
- div1 व div2 Elements, body Element का Children है।
- h1, table व p Elements, div1 Element के Children हैं।
- h1, p व ol Elements, div2 Element के Children हैं।
- दोनों tr Elements, table Element के Children हैं।
- दोनों tr Elements के क्रमशः दोनों td Elements के Children हैं।
- तीनों li Elements, ol Element के Children हैं।
यानी किसी Element X के अन्दर Nested सभी Elements, Element X के Children होते हैं।
Siblings
उपरोक्त चित्र के अनुसार
- div1 व div2 Elements आपस में Siblings है।
- h1, table व p Elements आपस में Siblings है।
- h1, p व ol Elements आपस में Siblings है।
- दोनों tr Elements आपस में Siblings है।
- दोनों tr Elements के दोनों td Elements आपस में Siblings है।
- तीनों li Elements आपस में Siblings है।
यानी किसी Element X के अन्दर Nested सभी Elements आपस में Siblings होते हैं।
Inheritance
जब हम किसी एक HTML Element पर किसी CSS Rule को Apply करते हैं, तो वह Rule उस Element के सभी Descendent Elements को Pass हो जाता है। यानी बिना किसी तरह का कोई Extra Statement लिखे हुए भी, Ancestor Element के सभी Child Elements पर वह Rule Apply हो जाता है, चाहे वह Ancestor किसी भी Level का Child क्यों न हो। इसी प्रक्रिया को CSS में Inheritance कहा जाता है।
उदाहरण के लिए यदि हम उपरोक्त HTML Document के body Element के Font की Size 16px Set कर दें, तो DOM Tree में दिखाई देने वाले सभी Elements यानी div1, div2, h1, p, ol, li, tr, td आदि की Default Font Size 16px Set हो जाएगी।
चूंकि हमने केवल body Element की Font Size 16px Set की थी और उसके सभी Descendants की Font Size 16px हो गई, इसी प्रक्रिया को Inheritance कहा जाता है क्योंकि इस DOM Tree के सभी Elements ने body Element के CSS Rule को Inherit कर लिया है।
Inheritance तब तक चलता रहता है, जब तक कि DOM Tree के सभी Descendent Elements में से कोई Element अपना स्वयं का CSS Rule Specify करके अपने Ancestor के CSS Rule को Override न कर दे।
उदाहरण के लिए यदि हम body Element की Font Size 16px व ol Element की Font Size को CSS Rule द्वारा 12px Set कर दें, तो ol Element व उसके Child Elements की Font Size 12px हो जाएगी क्योंकि सभी li Elements अपने Parent ol Element के Font Size को Inherit करेंगे, लेकिन DOM Tree के अन्य सभी Elements की Font Size 16px ही रहेगी क्योंकि बाकी के सभी Elements की Font Size body Element से Inherit होने की वजह से उनकी Size 16px ही रहेगी। (HTML DOM Hierarchy)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
