HTML <टेम्पलेट> और <स्लॉट> छाया डोम के साथ कैसे उपयोग करें
HTML खांचा W3C द्वारा किए गए सबसे उल्लेखनीय मानकों में से एक है। कहा जाता है कि एक और प्रभावशाली W3C मानक के साथ मिलाएं टेम्पलेट्स, और आपके पास काम करने के लिए एक शानदार शंखनाद है। करने में सक्षम HTML तत्वों को बनाएँ और जोड़ें एक पृष्ठ के लिए जावास्क्रिप्ट का उपयोग कर एक आवश्यक और महत्वपूर्ण कार्य है.
कोड स्निपेट के लिए उपयोगी है केवल निश्चित समय पर दिखाई दें, या जब आप सैकड़ों समान संरचित HTML तत्वों को टाइप नहीं करना चाहते हैं, लेकिन करना चाहते हैं प्रक्रिया को स्वचालित करें.
जावास्क्रिप्ट में HTML तत्व बनाना है इतना वांछनीय नहीं है. यदि आपने सभी टैग कवर कर लिए हैं, तो उन्हें सही क्रम में रखा है, सभी को जांचने और जाँचने में परेशानी है, बस बहुत टाइप करने के लिए और ट्रैक रखने के लिए बहुत कुछ। यह उथलपुथल, हालांकि, एक समाधान मिला जब टैग दिखाई दिया। अगर कुछ होना चाहिए पृष्ठ में गतिशील रूप से जोड़ा गया, आप इसे अंदर डाल सकते हैं
तत्त्व.
इस पोस्ट में, मैं आपको दिखाऊंगा कि आप कैसे उपयोग कर सकते हैं
तथा जावास्क्रिप्ट के साथ एक साथ टैग एक मिनी HTML टेबल फैक्ट्री बनाएं जो सैकड़ों समान तालिकाओं को बना और आबाद कर सकता है.
तथा
टैग
टैग में HTML कोड होता है ब्राउज़रों द्वारा प्रदान नहीं किया जाएगा जब तक यह ठीक से दस्तावेज़ में नहीं जोड़ा जाता है, तब तक जावास्क्रिप्ट का उपयोग करना।
टैग एक है प्लेसहोल्डर आप एक छाया डोम में जोड़ें की सामग्री से बना जा सकता है तत्त्व.
ए छाया डोम एक नियमित DOM (HTML से प्रलेखित दस्तावेज़ मॉडल) के समान है। यह एक झुलसा हुआ पेड़ बनाता है (एक शैडो डोम ट्री), जिसमें ए अपनी खुद की जड़ और एक भी हो सकता है अपनी खुद की शैली.
जब आप छाया डॉम ट्री को मुख्य दस्तावेज़ में एक तत्व में सम्मिलित करते हैं - तत्व को तब कहा जाएगा छाया मेजबान -, छाया होस्ट के सभी बच्चे तत्व जो इसके साथ चिह्नित हैं स्लॉट
विशेषता (उपरोक्त के समान नहीं है
टैग) होगा नए सम्मिलित उपशीर्षक में उनकी जगह लें.
शैडो डोम, इस लेख को लिखने के रूप में (जुलाई 2017), हैं केवल WebKit- और ब्लिंक-आधारित ब्राउज़रों में समर्थित है लेकिन आप किसी भी समय CanIUse पर ब्राउज़र समर्थन की वास्तविक स्थिति की जांच कर सकते हैं.
HTML सेट करना
अभी भी भ्रमित? आइए, कुछ कोड देखते हैं, जिनके साथ शुरू होता है तत्त्व.
के भीतर टेम्पलेट के अंदर, मैंने भी जोड़ा है कुछ बुनियादी शैलियों तालिका के लिए, का उपयोग कर टेम्पलेट के बाहर, वहाँ दॊ है से प्रत्येक अभी, आप सभी पृष्ठ पर देख सकते हैं कि पाठ स्ट्रिंग में निहित हैं, इसलिए हमें कुछ जावास्क्रिप्ट जोड़ने की आवश्यकता है. जावास्क्रिप्ट का उपयोग करते हुए, हम टेम्प्लेट के अंदर से तालिका को दोनों विभाजनों में सम्मिलित करते हैं एक छाया डोम पेड़ के रूप में. सम्मिलन के बाद, स्पैन को टेबल के अंदर अपने संबंधित स्लॉट में रखा जाता है और वांछित कॉलम शीर्षक या सेल मान प्रदर्शित करते हैं। परिणाम होगा दो ऑटो-जनरेटेड टेबल कि एक ही टेम्पलेट का उपयोग करें. सबसे पहले, हमें यह जांचने की आवश्यकता है कि उपयोगकर्ता के ब्राउज़र में शैडो डोम समर्थित है या नहीं। हम एक कस्टम चर बनाते हैं जिसे कहा जाता है के अंदर वहां दो तब हम टेम्पलेट सामग्री की एक प्रति जोड़ें छाया डोम पेड़ का उपयोग कर और, हमारे डायनामिक HTML टेबल तैयार हैं, यहाँ क्रोम में आउटपुट कैसा दिखता है:, वहां एक
कुंआ एक खाका के रूप में उपयोग करें के लिये कुछ तालिकाओं का निर्माण वह एक दस्तावेज़ में जोड़ा जाएगा। वहां
तालिका कोशिकाओं के अंदर के तत्व ( तथा ) प्लेसहोल्डर के रूप में अभिनय स्तंभ शीर्षकों और सेल मानों के लिए। प्रत्येक स्लॉट में एक अद्वितीय है नाम
विशेषता है कि इसकी पहचान करता है.
टैग.
, दो अलग-अलग तालिकाओं के लिए हम पृष्ठ में जोड़ना चाहते हैं.
तत्व एक है
स्लॉट
किस मूल्य का गुण है के बराबर नाम
मूल्य उनके अनुरूप
अंदर टैग करें .
छाया डोम पेड़ संलग्न
attachShadow ()
तरीका एक तत्व के लिए एक शैडो डोम ट्री संलग्न करता है और उस शैडो DOM ट्री के रूट नोड को लौटाता है। अगर
नीचे दिए गए कोड में स्थिति यह जांचती है कि क्या ब्राउज़र इस पद्धति का परीक्षण करता है अगर पृष्ठ पर divs है attachShadow
तरीका. // देखें कि क्या शैडो डोम का समर्थन किया गया है अगर ('संलग्नक' डॉक्यूमेंट में।
templateContent
उस एक संदर्भ के रूप में कार्य करता है टेम्पलेट की सामग्री के लिए. अगर ('संलग्नकदो' में document.createElement ('div')) let टेम्पलेटकंटेंट = document.querySelector ('टेम्पलेट') सामग्री; Lets divs = document.querySelectorAll ('div'); divs.forEach (फंक्शन (div) // इनसाइड लूप); और सांत्वना। बौना ('संलग्न नहीं समर्थित');
प्रत्येक के लिए
पाश, एक शैडो डोम ट्री है प्रत्येक div से जुड़ी (div.attachShadow (मोड: 'ओपन')
).मोड
विकल्प के लिये attachShadow
: खुला
तथा बन्द है
. अगर बन्द है
को शैडो DOM ट्री का रूट नोड चुना गया था दुर्गम हो जाएगा DOM तत्वों और वस्तुओं को बाहर करने के लिए.templateContent.cloneNode (सही)
तरीका. अगर ('संलग्नकदो' में document.createElement ('div')) let टेम्पलेटकंटेंट = document.querySelector ('टेम्पलेट') सामग्री; Lets divs = document.querySelectorAll ('div'); divs.forEach (फ़ंक्शन (div) div.attachShadow (मोड: 'ओपन')। appendChild (templateContent.cloneNode (true))); और सांत्वना। बौना ('संलग्न नहीं समर्थित');