इस अध्याय में हम एडवांस्ड DOM कॉन्सेप्ट्स के बारे में जानेंगे जो वेब विकास को और अधिक शक्तिशाली और इंटरएक्टिव बनाते हैं। आप सीखेंगे कि कैसे जटिल DOM मैनिपुलेशन किया जाता है और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए एडवांस्ड तकनीकों का उपयोग कैसे किया जाता है। इस अध्याय के अंत तक, आप वेब पेज के विभिन्न हिस्सों को अधिक प्रभावी ढंग से कंट्रोल करने, डाइनैमिक रूप से एलिमेंट्स बनाने और उन्हें स्टाइल करने में सक्षम होंगे। आप इवेंट डेलीगेशन, DOM ट्रैवर्सल, और DOM फ्रैगमेंट्स जैसी एडवांस्ड तकनीकों को भी समझ पाएंगे, जो आपको वेब पेज पर तेजी से और कुशलता से कार्य करने में मदद करेंगी।
शैडो DOM (Shadow DOM)
शैडो DOM एक महत्वपूर्ण और एडवांस्ड तकनीक है जो वेब कम्पोनेंट्स के निर्माण के लिए उपयोग की जाती है। यह वेब कम्पोनेंट्स को अन्य भागों से अलग रखता है ताकि उनके स्टाइल और स्क्रिप्ट्स बाहरी प्रभाव से सुरक्षित रहें।
शैडो DOM का परिचय (Introduction to Shadow DOM)
शैडो DOM एक अलग, लेकिन संबंधित, DOM ट्री है जिसे एक शैडो रूट से जोड़ा जाता है। यह मुख्य DOM से अलग होता है और इसके अंदर के एलिमेंट्स मुख्य DOM के स्टाइल और स्क्रिप्ट से प्रभावित नहीं होते।
शैडो DOM के लाभ (Benefits of Shadow DOM)
- कम्पोनेंट आइसोलेशन (Component Isolation): शैडो DOM के उपयोग से आप अपने वेब कम्पोनेंट्स को अलग-थलग कर सकते हैं, जिससे वे बाहरी स्टाइल और स्क्रिप्ट्स के प्रभाव से मुक्त रहते हैं।
- स्टाइल एन्कैप्सुलेशन (Style Encapsulation): शैडो DOM के अंदर लिखे गए स्टाइल केवल उसी शैडो ट्री के एलिमेंट्स पर लागू होते हैं।
- रीयूजेबिलिटी (Reusability): शैडो DOM कम्पोनेंट्स को अलग-अलग वेब पेजों पर बिना किसी स्टाइल या स्क्रिप्ट संघर्ष के पुनः उपयोग किया जा सकता है।
शैडो DOM का उपयोग (Using Shadow DOM)
शैडो DOM का उपयोग करने के लिए, आपको सबसे पहले एक शैडो रूट बनाना होता है और फिर उसमें शैडो ट्री जोड़ना होता है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM Example</title>
<style>
/* मुख्य DOM का स्टाइल */
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph in the main DOM.</p>
<div id="shadow-host"></div>
<script>
// शैडो रूट बनाना
let shadowHost = document.getElementById('shadow-host');
let shadowRoot = shadowHost.attachShadow({mode: 'open'});
// शैडो ट्री बनाना
shadowRoot.innerHTML = `
<style>
/* शैडो DOM का स्टाइल */
p {
color: red;
}
</style>
<p>This is a paragraph in the shadow DOM.</p>
`;
</script>
</body>
</html>इस उदाहरण में, शैडो रूट का उपयोग करके #shadow-host एलिमेंट के अंदर एक शैडो ट्री जोड़ा गया है। शैडो ट्री के अंदर का पैराग्राफ मुख्य DOM के स्टाइल से प्रभावित नहीं होता है और उसका रंग लाल रहता है, जबकि मुख्य DOM का पैराग्राफ नीला रहता है।
शैडो DOM मोड्स (Shadow DOM Modes)
शैडो DOM में दो मोड होते हैं:
- ओपन मोड (Open Mode): इस मोड में, शैडो रूट को जावा स्क्रिप्ट कोड के माध्यम से एक्सेस और मैनिपुलेट किया जा सकता है।
- क्लोज्ड मोड (Closed Mode): इस मोड में, शैडो रूट बाहरी जावा स्क्रिप्ट कोड के लिए अप्राप्य होता है।
// शैडो रूट को ओपन मोड में बनाना
let shadowRootOpen = shadowHost.attachShadow({mode: 'open'});
// शैडो रूट को क्लोज्ड मोड में बनाना
let shadowRootClosed = shadowHost.attachShadow({mode: 'closed'});वेब कंपोनेंट्स (Web Components)
वेब कंपोनेंट्स आधुनिक वेब विकास की एक महत्वपूर्ण तकनीक है जो आपको पुन: प्रयोज्य, कस्टम HTML तत्व बनाने की अनुमति देती है। वेब कंपोनेंट्स वेब एप्लिकेशन्स को मॉड्यूलर, स्केलेबल और बनाए रखने में आसान बनाते हैं।
वेब कंपोनेंट्स का परिचय (Introduction to Web Components)
वेब कंपोनेंट्स तीन मुख्य तकनीकों पर आधारित होते हैं:
- कस्टम एलिमेंट्स (Custom Elements): अपने खुद के HTML टैग्स बनाने की अनुमति देता है।
- शैडो DOM (Shadow DOM): कंपोनेंट्स को आइसोलेट करने के लिए।
- HTML टेम्प्लेट्स (HTML Templates): HTML टेम्प्लेट्स को पुन: उपयोग करने के लिए।
कस्टम एलिमेंट्स (Custom Elements)
कस्टम एलिमेंट्स आपको अपने खुद के HTML टैग्स बनाने की अनुमति देते हैं। ये तत्व मानक HTML तत्वों की तरह ही कार्य करते हैं लेकिन इनके व्यवहार को आप अपने हिसाब से परिभाषित कर सकते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements Example</title>
</head>
<body>
<!-- कस्टम एलिमेंट का उपयोग -->
<my-element></my-element>
<script>
// कस्टम एलिमेंट्स को परिभाषित करना
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
p {
color: blue;
}
</style>
<p>Hello, this is a custom element!</p>
`;
}
}
// कस्टम एलिमेंट को रजिस्टर करना
customElements.define('my-element', MyElement);
</script>
</body>
</html>इस उदाहरण में, my-element नामक एक कस्टम एलिमेंट परिभाषित किया गया है जो एक पैराग्राफ प्रदर्शित करता है।
शैडो DOM (Shadow DOM)
शैडो DOM का उपयोग करके आप अपने कंपोनेंट्स को अन्य भागों से अलग कर सकते हैं ताकि उनके स्टाइल और स्क्रिप्ट्स बाहरी प्रभाव से सुरक्षित रहें।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM Example</title>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
p {
color: green;
}
</style>
<p>This is inside the shadow DOM!</p>
`;
}
}
customElements.define('my-element', MyElement);
</script>
</body>
</html>HTML टेम्प्लेट्स (HTML Templates)
HTML टेम्प्लेट्स का उपयोग करके आप HTML स्ट्रक्चर को टेम्प्लेट के रूप में परिभाषित कर सकते हैं और उन्हें बाद में पुन: उपयोग कर सकते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>HTML Templates Example</title>
</head>
<body>
<template id="my-template">
<style>
p {
color: red;
}
</style>
<p>This is from the template!</p>
</template>
<div id="container"></div>
<script>
const template = document.getElementById('my-template');
const container = document.getElementById('container');
container.appendChild(document.importNode(template.content, true));
</script>
</body>
</html>इस उदाहरण में, template टैग के अंदर HTML और स्टाइल्स को परिभाषित किया गया है, जिसे बाद में container डिव में इम्पोर्ट और उपयोग किया गया है।
DOM ट्रैवर्सल (DOM Traversal)
DOM ट्रैवर्सल एक महत्वपूर्ण तकनीक है जो आपको वेब पेज के विभिन्न तत्वों को नेविगेट और हेरफेर करने की अनुमति देती है। इसके माध्यम से आप DOM ट्री में ऊपर, नीचे, या समान स्तर के तत्वों को आसानी से खोज सकते हैं और उनके साथ इंटरैक्ट कर सकते हैं।
DOM ट्रैवर्सल का परिचय (Introduction to DOM Traversal)
DOM ट्रैवर्सल का उपयोग करके आप किसी भी वेब पेज के HTML तत्वों के बीच नेविगेट कर सकते हैं। यह आपको पेरेंट, चाइल्ड, और सिबलिंग तत्वों को आसानी से खोजने और उन्हें हेरफेर करने की अनुमति देता है।
DOM ट्रैवर्सल मेथड्स (DOM Traversal Methods)
- पेरेंट एलिमेंट (Parent Element):
parentNode: वर्तमान नोड के पेरेंट को रिटर्न करता है।parentElement: वर्तमान एलिमेंट के पेरेंट एलिमेंट को रिटर्न करता है।
- चाइल्ड एलिमेंट्स (Child Elements):
childNodes: वर्तमान नोड के सभी चाइल्ड नोड्स को एक नोडलिस्ट में रिटर्न करता है।children: वर्तमान एलिमेंट के सभी चाइल्ड एलिमेंट्स को एक HTMLCollection में रिटर्न करता है।firstChild: वर्तमान नोड के पहले चाइल्ड नोड को रिटर्न करता है।lastChild: वर्तमान नोड के अंतिम चाइल्ड नोड को रिटर्न करता है।firstElementChild: वर्तमान एलिमेंट के पहले चाइल्ड एलिमेंट को रिटर्न करता है।lastElementChild: वर्तमान एलिमेंट के अंतिम चाइल्ड एलिमेंट को रिटर्न करता है।
- सिबलिंग एलिमेंट्स (Sibling Elements):
nextSibling: वर्तमान नोड के अगले सिबलिंग नोड को रिटर्न करता है।previousSibling: वर्तमान नोड के पिछले सिबलिंग नोड को रिटर्न करता है।nextElementSibling: वर्तमान एलिमेंट के अगले सिबलिंग एलिमेंट को रिटर्न करता है।previousElementSibling: वर्तमान एलिमेंट के पिछले सिबलिंग एलिमेंट को रिटर्न करता है।
DOM ट्रैवर्सल का उपयोग (Using DOM Traversal)
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal Example</title>
</head>
<body>
<div id="parent">
<p id="first">First Paragraph</p>
<p id="second">Second Paragraph</p>
<p id="third">Third Paragraph</p>
</div>
<script>
// पेरेंट एलिमेंट प्राप्त करना
let secondParagraph = document.getElementById("second");
let parent = secondParagraph.parentNode;
console.log(parent); // <div id="parent">...</div>
// चाइल्ड एलिमेंट्स प्राप्त करना
let parentDiv = document.getElementById("parent");
let children = parentDiv.children;
console.log(children); // HTMLCollection(3) [p#first, p#second, p#third]
// पहले और अंतिम चाइल्ड एलिमेंट्स
let firstChild = parentDiv.firstElementChild;
let lastChild = parentDiv.lastElementChild;
console.log(firstChild); // <p id="first">First Paragraph</p>
console.log(lastChild); // <p id="third">Third Paragraph</p>
// सिबलिंग एलिमेंट्स प्राप्त करना
let nextSibling = secondParagraph.nextElementSibling;
let previousSibling = secondParagraph.previousElementSibling;
console.log(nextSibling); // <p id="third">Third Paragraph</p>
console.log(previousSibling); // <p id="first">First Paragraph</p>
</script>
</body>
</html>
