डोम वस्तुओं के 15 अल्प-ज्ञात गुण और विधियाँ

आधुनिक वेबसाइटों को विकसित करते समय, DOM के साथ काम करने के लिए जावास्क्रिप्ट सुविधाओं का भारी उपयोग किया जाता है। लिपियां आपको उन तत्वों को प्रदर्शित करने और छिपाने की अनुमति देती हैं जिनसे पृष्ठ बनाए जाते हैं, इन तत्वों के गुणों को कॉन्फ़िगर करते हैं। डोम ऑब्जेक्ट्स जिन्हें प्रोग्राम्स से इंटरैक्ट किया गया है उनमें प्रॉपर्टीज़ और मेथड्स हैं। व्यावहारिक रूप से सभी वेब प्रोग्रामर उनमें से कुछ के बारे में जानते हैं, सामग्री के लेखक के अनुसार, जिसका अनुवाद आज हम प्रकाशित करते हैं। लेकिन जिनमें से कुछ के बारे में वह यहां बात करना चाहते हैं, वे बहुत कम प्रसिद्ध हैं।

HTML और DOM

सबसे पहले, चलो HTML और DOM के बीच अंतर के बारे में बात करते हैं। उदाहरण के लिए, एक नियमित <table< तत्व स्पष्ट रूप से HTML कोड है। यह तत्व html फ़ाइलों में उपयोग किया जा सकता है, इसमें विशेषताओं का एक सेट है जो इसकी मदद से बनाई गई तालिका की उपस्थिति और व्यवहार को निर्धारित करता है। कड़ाई से बोलते हुए, <table> टैग का जावास्क्रिप्ट से कोई लेना-देना नहीं है। दस्तावेज़ और जावास्क्रिप्ट कोड में मौजूद HTML तत्वों के बीच का संबंध DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) द्वारा प्रदान किया गया है। DOM, जावास्क्रिप्ट कोड से HTML तत्वों के साथ बातचीत करना संभव बनाता है जैसे कि वे ऑब्जेक्ट थे।

सभी HTML तत्वों के अपने "DOM इंटरफेस" होते हैं जो गुणों को परिभाषित करते हैं (वे आमतौर पर HTML तत्वों की विशेषताओं के साथ जुड़े होते हैं) और तरीके। उदाहरण के लिए, <table> तत्व में HTMLTableElement नामक एक इंटरफ़ेस है।

आप एक तत्व के लिए एक लिंक प्राप्त कर सकते हैं, उदाहरण के लिए, निम्नलिखित निर्माण का उपयोग कर:

 const searchBox = document.getElementById('search-box'); 

तत्व के लिंक प्राप्त होने के बाद, प्रोग्रामर के पास ऐसे तत्वों और गुणों तक पहुंच होती है जो ऐसे तत्व होते हैं। उदाहरण के लिए, आप एक निश्चित पाठ क्षेत्र की value संपत्ति के साथ काम कर सकते हैं, यह देखते हुए कि searchBox संरचना का उपयोग करके इसे लिंक को searchBox चर में संग्रहीत किया जाता है। आप इस पाठ क्षेत्र में कर्सर को इसके खोज searchBox.focus() । searchBox.focus() विधि से कॉल कर searchBox.focus() ।

शायद यह वह जगह है जहां हम अपने "शॉर्ट कोर्स ऑन डोम" को पूरा कर सकते हैं और वास्तव में, HTML तत्वों के डोम इंटरफेस के अल्प-ज्ञात गुणों और तरीकों के लिए जा सकते हैं।

यदि आप तुरंत पढ़ना और प्रयोग करना चाहते हैं, तो ब्राउज़र डेवलपर टूल खोलें। विशेष रूप से, एक निश्चित पृष्ठ तत्व का लिंक प्राप्त करने के लिए, आप इसे तत्व ट्री में चुन सकते हैं, और फिर कंसोल में $0 निर्माण का उपयोग कर सकते हैं। किसी आइटम को ऑब्जेक्ट के रूप में देखने के लिए, कंसोल में dir($0) टाइप करें। और वैसे, अगर आप अपने लिए कुछ नया करना चाहते हैं, तो कंसोल का उपयोग करके इसे एक्सप्लोर करने का प्रयास करें।

नंबर 1: टेबल के तरीके

मामूली <table> तत्व (जो अभी भी वेब पेज लेआउट के विकास में उपयोग की जाने वाली प्रौद्योगिकियों के बीच पहला स्थान रखता है) में बहुत अच्छी विधियों की एक उचित संख्या है जो तालिकाओं के निर्माण की प्रक्रिया को सरल बनाती है।

यहाँ उनमें से कुछ हैं।

 const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you'; 

जैसा कि आप देख सकते हैं, यहां हम document.createElement() जैसी कमांड का उपयोग नहीं करते हैं। और .insertRow() विधि, यदि आप इसे सीधे टेबल पर कहते हैं, तो <tbody> को भी प्रदान करेगा। क्या यह अद्भुत नहीं है?

# 2: scrollIntoView () विधि

आप शायद जानते हैं कि यदि लिंक में # निर्माण जैसा कोई निर्माण है, तो पृष्ठ लोड करने के बाद, ब्राउज़र स्वचालित रूप से संबंधित ID साथ तत्व को स्क्रॉल करेगा? विधि सुविधाजनक है, लेकिन अगर पेज लोड होने के बाद हमारे लिए ब्याज का तत्व प्रदान किया जाता है, तो यह काम नहीं करेगा। यहां बताया गया है कि इस व्यवहार पैटर्न को स्वयं कैसे बनाया जाए:

 document.querySelector(document.location.hash).scrollIntoView(); 

नंबर 3: छिपी हुई संपत्ति

यहां हम एक संपत्ति पर विचार करते हैं, हालांकि, सबसे अधिक संभावना है, जब इस संपत्ति का उपयोग करते हैं, तो एक निश्चित सेटर को बुलाया जाएगा, जो एक विधि है। किसी भी मामले में, याद रखें, क्या आपने कभी किसी तत्व को छिपाने के लिए नीचे दिखाए गए डिज़ाइन का उपयोग किया है?

 myElement.style.display = 'none' 

यदि आप इसका उपयोग करते हैं, तो आपको ऐसा नहीं करना चाहिए। किसी तत्व को छिपाने के लिए, उसकी hidden संपत्ति के लिए true लिखें:

 myElement.hidden = true 

# 4: टॉगल () विधि

वास्तव में, यह कुछ तत्व की एक विधि नहीं है। यह एक तत्व गुण विधि है। विशेष रूप से, यह विधि आपको निम्नलिखित निर्माण का उपयोग करके कक्षाओं को एक तत्व में जोड़ने और उन्हें इससे निकालने की अनुमति देती है:

 myElement.classList.toggle('some-class') 

वैसे, यदि आपने कभी भी निर्माण का उपयोग करते हुए कक्षाएं जोड़ी हैं, तो ध्यान रखें कि आपको अब ऐसा नहीं करना है, और इस निर्माण के बारे में भूल जाएं। toggle() विधि के दूसरे पैरामीटर का उपयोग करके एक ही तंत्र लागू किया जाता है। यदि यह एक ऐसी अभिव्यक्ति है जो true मूल्यांकन करती true , तो तत्व को toggle() करने के लिए पारित वर्ग toggle() को तत्व में जोड़ दिया जाएगा।

 el.classList.toggle('some-orange-class', theme === 'orange'); 

शायद, यहां आपको इस डिजाइन की पर्याप्तता के बारे में संदेह हो सकता है। आखिरकार, विधि का नाम, "टॉगल", जिसने इस तथ्य को दिया कि इसके द्वारा की गई कार्रवाई का सार इसमें छिपा हुआ है, का अनुवाद "स्विच" के रूप में किया जा सकता है, इसमें कोई उल्लेख नहीं है कि "स्विच" का अर्थ है एक निश्चित स्थिति की पूर्ति। हालांकि, ऊपर वर्णित डिज़ाइन इस रूप में मौजूद है, हालांकि इंटरनेट एक्सप्लोरर के डेवलपर्स भी शायद इसे अजीब मानते हैं। toggle() उनके कार्यान्वयन में toggle() दूसरा पैरामीटर प्रदान नहीं किया गया है। इसलिए, यद्यपि यह ऊपर कहा गया था कि जो लोग toggle() बारे में जानते हैं toggle() निर्माण के बारे में भूल सकते हैं, इसके बारे में भूल सकते हैं, फिर भी, नहीं।

# 5: querySelector () विधि

आप निश्चित रूप से इस पद्धति के अस्तित्व के बारे में पहले से ही जानते हैं, लेकिन एक संदेह है कि वास्तव में आप में से 17% को यह नहीं पता है कि इसका उपयोग किसी भी तत्व के लिए किया जा सकता है।

उदाहरण के लिए, निर्माण myElement.querySelector('.my-class') केवल उन तत्वों का चयन करता है जिनके पास वर्ग my-class और एक ही समय में myElement तत्व के वंशज हैं।

# 6: निकटतम () विधि

मूल तत्व खोज का समर्थन करने वाले सभी तत्वों में यह विधि है। यह कुछ इस तरह है जैसे querySelector() का उल्टा। इस पद्धति का उपयोग करते हुए, उदाहरण के लिए, आप वर्तमान अनुभाग के लिए शीर्षक प्राप्त कर सकते हैं:

 myElement.closest('article').querySelector('h1'); 

यहां, खोज के दौरान, पहले मूल तत्व <article> पता लगाया <article> है, और फिर पहला तत्व <h1> प्रवेश करता है।

# 7: getBoundingClientRect () विधि

getBoundingClientRect() विधि एक अच्छी तरह से सजाए गए छोटे ऑब्जेक्ट को उस तत्व के आकार के बारे में जानकारी देता है जिसके लिए यह विधि कहा जाता था।

 { x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 } 

हालाँकि, इस पद्धति का उपयोग करते हुए, विशेष रूप से, दो बिंदुओं पर ध्यान देना चाहिए:

• इस विधि को कॉल करने से पृष्ठ का एक रीड्रा होता है। उस उपकरण के आधार पर जिस पर पृष्ठ देखा जाता है, और पृष्ठ की जटिलता पर, यह ऑपरेशन कई मिलीसेकंड ले सकता है। इस पर विचार करें यदि आप इस पद्धति को कुछ दोहराए जाने वाले कोड टुकड़ों में कॉल करने का इरादा रखते हैं, उदाहरण के लिए, एनीमेशन प्रदर्शन करते समय।
• सभी ब्राउज़र इस विधि का समर्थन नहीं करते हैं।

# 8: मैच () विधि

मान लीजिए कि हमें जांचने की जरूरत है कि क्या एक निश्चित तत्व में एक निश्चित वर्ग है।

यहाँ इस समस्या को हल करने का तरीका बताया गया है, स्पष्ट रूप से सबसे कठिन तरीके से:

 if (myElement.className.indexOf('some-class') > -1) { //  -  } 

यहां एक और विकल्प है, यह बेहतर है, लेकिन आदर्श से बहुत दूर है:

 if (myElement.className.includes('some-class')) { //  -  } 

और यहाँ इस समस्या को हल करने का सबसे अच्छा तरीका है:

 if (myElement.matches('.some-class')) { //  -  } 

# 9: InsertAdjacentElement () विधि

यह विधि appendChild() समान है, लेकिन जहां बाल तत्व जोड़ा जाएगा, वहां थोड़ी अधिक शक्ति देता है।

तो, कमांड parentEl.insertAdjacentElement('beforeend', newEl) कमांड parentEl.appendChild(newEl) समान है, लेकिन insertAdjacentElement() पद्धति का उपयोग करते हुए, beforeend तर्क के अलावा, आप पहले से गुजर सकते हैं, इसके afterbegin , afterend और afterend इंगित करने के लिए संकेत कर सकते हैं। आइटम जोड़ें।

नंबर 10: शामिल () विधि

क्या आपने कभी जानना चाहा है कि क्या एक तत्व दूसरे के अंदर है? मुझे इसकी हर समय जरूरत है। उदाहरण के लिए, यदि माउस क्लिक करने की प्रक्रिया के दौरान आपको यह पता लगाना होगा कि यह मोडल विंडो के अंदर हुआ है या उसके बाहर (जिसका अर्थ है कि इसे बंद किया जा सकता है), आप निम्न निर्माण का उपयोग कर सकते हैं:

 const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; }; 

यहाँ modalEl एक मोडल विंडो का लिंक है, और e.target किसी भी तत्व पर क्लिक किया जाता है। दिलचस्प बात यह है कि जब मैं इस तकनीक का उपयोग करता हूं, तो मुझे पहली बार सबकुछ सही लिखने के लिए कभी नहीं मिलता है, यहां तक ​​कि मुझे याद है कि मैं लगातार गलत हूं और अग्रिम में संभावित त्रुटियों को ठीक करने का प्रयास करता हूं।

# 11: getAttribute () विधि

शायद इस पद्धति को सबसे बेकार कहा जा सकता है, हालांकि, एक स्थिति है जिसमें यह निश्चित रूप से काम में आ सकता है।

याद रखें, हमने पहले कहा था कि डोम ऑब्जेक्ट्स के गुण आमतौर पर HTML तत्वों की विशेषताओं से जुड़े होते हैं?

ऐसे मामलों में से एक जब यह मामला नहीं होता है, तो href विशेषता द्वारा दर्शाया जाता है, उदाहरण के लिए, जैसे कि यहाँ: <a href="/animals/cat">Cat</a> ।

el.href निर्माण वापस नहीं आएगा, जैसा कि आप उम्मीद कर सकते हैं, /animals/cat । ऐसा इसलिए है क्योंकि <a> तत्व HTMLHyperlinkElementUtils इंटरफ़ेस को लागू करता है, जिसमें protocol और hash जैसे कई सहायक गुण होते हैं जो लिंक के विवरण का पता लगाने में आपकी सहायता करते हैं।
इन सहायक गुणों में से एक href प्रॉपर्टी है, जो एक पूर्ण URL देता है जिसमें वह सब कुछ शामिल होता है जो संबंधित URL की विशेषता में नहीं होता है।

परिणामस्वरूप, ठीक उसी तरह से प्राप्त करने के लिए जिसे href विशेषता में लिखा गया है, आपको el.getAttribute('href') निर्माण का उपयोग करने की आवश्यकता है।

संख्या 12: <संवाद> तत्व के तीन तरीके

अपेक्षाकृत नया <dialog> तत्व में दो उपयोगी, लेकिन काफी सामान्य तरीके हैं, और एक विधि जिसे बस अद्भुत कहा जा सकता है। तो, show() और close() विधियां ठीक वही करती हैं जो आप उनसे उम्मीद कर सकते हैं, विंडो दिखा और छिपा सकते हैं। हम उन्हें उपयोगी, लेकिन साधारण कहते हैं। लेकिन showModal() विधि खिड़की के केंद्र में प्रदर्शित करते हुए, बाकी सभी चीजों के ऊपर <dialog> तत्व दिखाएगा। तथ्य की बात के रूप में, इस तरह के व्यवहार की आमतौर पर मोडल खिड़कियों से उम्मीद की जाती है। ऐसे तत्वों के साथ काम करते समय, आपको z-index संपत्ति के बारे में सोचने की ज़रूरत नहीं है, मैन्युअल रूप से एक धुंधली पृष्ठभूमि जोड़ें, या संबंधित विंडो को बंद करने के लिए Escape कुंजी दबाने की घटना को सुनें। ब्राउज़र जानता है कि मोडल विंडो को कैसे काम करना चाहिए और यह सुनिश्चित करेगा कि सब कुछ उसी तरह काम करे जैसा उसे करना चाहिए।

# 13: forEach () विधि

कभी-कभी, जब आपको तत्वों की सूची का लिंक मिलता है, तो आप इन तत्वों को forEach() विधि का उपयोग करके forEach() कर सकते हैं। के for() लूप्स कल हैं। मान लीजिए हमें लॉग में पृष्ठ से सभी <a> तत्वों को सूचीबद्ध करने की आवश्यकता है। यदि हम नीचे दिखाए अनुसार ऐसा करते हैं, तो हम एक त्रुटि संदेश का सामना करेंगे:

 document.getElementsByTagName('a').forEach(el => {   console.log(el.href); }); 

इस समस्या को हल करने के लिए, आप निम्न निर्माण का उपयोग कर सकते हैं:

 document.querySelectorAll('a').forEach(el => {   console.log(el.href); }); 

यहाँ बिंदु यह है कि getElementsByTagName() प्रकार की वस्तु HTMLCollection का एक ऑब्जेक्ट HTMLCollection , और querySelectorAll ऑब्जेक्ट querySelectorAll । यह NodeList ऑब्जेक्ट का इंटरफ़ेस है जो हमें forEach() विधि (और keys() लिए भी keys() , values() और entries() विधियों तक पहुँच प्रदान करता है।

वास्तव में, यह बहुत बेहतर होगा यदि इस तरह के तरीके बस सामान्य सरणियों को लौटाते हैं, और हमें कुछ ऐसी पेशकश नहीं करते हैं जिसमें कुछ प्रकार के उपयोगी तरीके होते हैं जो काफी सरणियों की तरह नहीं होते हैं। हालांकि, इस वजह से परेशान मत हो, क्योंकि ECMA के स्मार्ट लोगों ने हमें एक शानदार तरीका दिया - Array.from() , जो हमें उन सभी चीजों को चालू करने की अनुमति देता है जो सरणियों की तरह दिखती हैं।

परिणामस्वरूप, आप निम्नलिखित लिख सकते हैं:

 Array.from(document.getElementsByTagName('a')).forEach(el => {   console.log(el.href); }); 

और यहाँ एक अच्छी छोटी सी बात है। एक सरणी में बदलकर जो पहले जैसा हुआ करता था, हमें कई सरणी विधियों का उपयोग करने का अवसर मिलता है, जैसे कि map() , filter() और reduce() । यहां, उदाहरण के लिए, पृष्ठ पर बाहरी लिंक की एक सरणी कैसे बनाएं:

 Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean); 

वैसे, मैं वास्तव में .filter(Boolean) निर्माण पसंद करता .filter(Boolean) क्योंकि जब मैं इसे कुछ समय पहले मिले कोड में मिलता हूं, तो मैं इसका अर्थ शायद ही समझ सकता हूं।

नंबर 14: रूपों के साथ काम करते हैं

आपको यह जानने की बहुत संभावना है कि <form> तत्व में एक submit() विधि है। हालांकि, यह कम संभावना है कि आप जानते हैं कि प्रपत्रों में एक reset() विधि है, और उनके पास एक reportValidity() विधि है, जो तब लागू होती है जब फॉर्म के तत्वों को भरने का सत्यापन किया जाता है।

रूपों के साथ काम करते समय, इसके अलावा, आप उनकी elements संपत्ति का उपयोग कर सकते हैं, जो एक बिंदु के माध्यम से, आपको उनके name विशेषताओं का उपयोग करके फार्म तत्वों तक पहुंचने की अनुमति देता है। उदाहरण के लिए, myFormEl.elements.email कंस्ट्रक्शन <input name="email" /> एलिमेंट फॉर्म से संबंधित होगा ("संबंधित" जरूरी नहीं कि "वंशज होने का मतलब है")।

यहां यह ध्यान दिया जाना चाहिए कि elements संपत्ति स्वयं सामान्य तत्वों की सूची नहीं लौटाती है। यह नियंत्रणों की एक सूची देता है (और यह सूची, निश्चित रूप से, एक सरणी नहीं है)।

यहाँ एक उदाहरण है। यदि प्रपत्र पर तीन रेडियो बटन हैं और उन सभी का नाम ( animal ) समान है, तो formEl.elements.animal निर्माण रेडियो बटन (1 नियंत्रण, 3 HTML तत्वों) के एक सेट को एक लिंक देगा। और यदि आप डिज़ाइन formEl.elements.animal.value उपयोग करते हैं, तो यह उपयोगकर्ता द्वारा चुने गए रेडियो बटन का मूल्य देगा।

यदि आप इसके बारे में सोचते हैं, तो यह सब बहुत अजीब लगता है, तो चलिए पिछले उदाहरण से निपटते हैं:

• formEl एक तत्व है।
• elements एक HTMLFormControlsCollection ऑब्जेक्ट है जो एक सरणी जैसा दिखता है लेकिन ऐसा नहीं है। इसके तत्व आवश्यक रूप से HTML तत्व नहीं हैं।
• animal कई रेडियो बटन का एक सेट है, इस तथ्य के कारण सेट के रूप में प्रस्तुत किया गया है कि उन सभी में एक ही name विशेषता है (रेडियो बटन के साथ काम करने के लिए विशेष रूप से डिज़ाइन किया गया एक रेडियोनोडलिस्ट इंटरफ़ेस है)।
• value उपयोग संग्रह में सक्रिय रेडियो बटन के value विशेषता तक पहुंचने के लिए किया जाता है।

# 15: चयन () विधि

शायद सामग्री के अंत में यह कुछ बिल्कुल आश्चर्यजनक विधि के बारे में बात करना बेहतर होगा, हालांकि शायद यह विधि किसी के लिए एक रहस्योद्घाटन होगी। तो, .select() विधि आपको इनपुट फ़ील्ड में पाठ का चयन करने की अनुमति देती है जिसके लिए इसे कहा जाता है।

परिणाम

इस लेख में, हमने अल्पज्ञात विधियों और गुणों के बारे में बात की है जिनका उपयोग वेब पृष्ठों की सामग्री के साथ काम करने के लिए किया जा सकता है। हम आशा करते हैं कि आपने यहां अपने लिए कुछ नया पाया है, और शायद न केवल नया, बल्कि उपयोगी भी हो।

प्रिय पाठकों! क्या आप वेब पेजों की सामग्री के साथ प्रोग्रामेटिक इंटरैक्शन के किसी भी माध्यम का उपयोग करते हैं जो व्यापक रूप से ज्ञात नहीं हैं?