15 एचटीएमएल तत्व विधियां जो आपने शायद कभी नहीं सुनी हैं

अनुवादक से: डेविड गिलबर्टसन एक प्रसिद्ध लेखक हैं जो वेब और क्रिप्टोक्यूरेंसी प्रौद्योगिकियों के बारे में लिखते हैं। वह पाठकों के एक बड़े दर्शकों को इकट्ठा करने में सक्षम था, जो सभी प्रकार के चाल और दिलचस्प क्षेत्रों के बारे में बताता है।



छोटा सा परिचय

एचटीएमएल और डोम के बीच अंतर पर चर्चा करते हैं।

उदाहरण के लिए, HTML से तालिका तत्व लें। आप एक्सटेंशन .html के साथ एक फ़ाइल में इसका उपयोग कर सकते हैं। इसमें, हम उन विशेषताओं का एक समूह इंगित करते हैं जो पृष्ठ की उपस्थिति और "व्यवहार" को निर्धारित करते हैं।

और यह सब, जावास्क्रिप्ट के साथ कुछ नहीं करना है।

DOM एक ऐसी चीज़ है जो आपको एक दस्तावेज़ में HTML तत्वों के साथ अपने जावास्क्रिप्ट कोड को संयोजित करने की अनुमति देता है ताकि आप उनके साथ वस्तुओं के रूप में बातचीत कर सकें।

यह एक दस्तावेज़-में-ऑब्जेक्ट मॉडल है।

HTML में किसी भी प्रकार के तत्व का अपना "DOM" इंटरफ़ेस है, जो गुणों और विधियों को परिभाषित करता है। उदाहरण के लिए, तालिका में HTMLTableElement नामक एक इंटरफ़ेस है।

आप इस तरह से कुछ लिखकर किसी विशिष्ट तत्व का लिंक प्राप्त कर सकते हैं:



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

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

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

यदि आप स्वयं DOM से निपटने का प्रयास करना चाहते हैं, तो आपको कुछ तत्वों को सीखने के लिए ब्राउज़र टूल का उपयोग करना चाहिए। ऐसा करने के लिए, तत्व ट्री में उनमें से एक का चयन करें और कंसोल में $ 0 टाइप करें। यह आपको आपके द्वारा चयनित आइटम का लिंक देगा। इसे किसी ऑब्जेक्ट में बदलने के लिए, dir ($ 0) टाइप करें।

कई चीजें हैं जो आप कंसोल में कर सकते हैं ।

स्किलबॉक्स अनुशंसा करता है: वेब डेवलपर ऑनलाइन पाठ्यक्रम
हम आपको याद दिलाते हैं: हैबर के सभी पाठकों के लिए - जब हेब प्रचारक कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

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

कई सुविधाजनक तरीके हैं जो आपको आइकिया में फर्नीचर जैसी तालिकाओं को इकट्ठा करने की अनुमति देते हैं।

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। स्क्रॉल-इन-व्यू ()

आप जानते हैं कि अगर आपके पास URL में #something है, तो जब पृष्ठ लोड होता है, तो ब्राउज़र इस आईडी के साथ तत्व को स्क्रॉल करेगा?

यह आमतौर पर बहुत मदद करता है, लेकिन अगर आप इस तत्व को पेज लोड होने के बाद रेंडर करते हैं तो यह काम नहीं करता है। ऊपर वर्णित अवसर का लाभ उठाने के लिए, बस document.querySelector (document.location.hash) .scrollIntoView () लिखिए;

नंबर 3। छिपा हुआ

ठीक है, हाँ, यह एक तरह की विधि है, लेकिन चूंकि एक सेटर (किसी संपत्ति को स्थापित करने की विधि) है, तो इसे एक विधि माना जा सकता है।

जैसा कि हो सकता है, क्या आपने कभी तत्व को छिपाने के लिए myElement.style.display = 'none' का उपयोग किया है? यदि ऐसा है, तो ऐसा न करें।

जहां myElement.hidden = true का उपयोग करना बेहतर है।

नंबर 4। टॉगल ()

हम myElement.classList.toggle ('कुछ-वर्ग') का उपयोग करके तत्व वर्ग को जोड़ने या निकालने के लिए इस पद्धति का उपयोग कर सकते हैं।

और यदि आपने कभी भी एक वर्ग का उपयोग करके जोड़ा है, तो सोचें: शायद आपको कुछ और प्रयास करना चाहिए?

उदाहरण के लिए, आप टॉगल विधि के लिए दूसरे पैरामीटर का उपयोग कर सकते हैं। आपको इसे स्विचिंग विधि में पास करना होगा। यदि ऐसा होता है, तो आपकी कक्षा को तत्व में जोड़ दिया जाएगा:

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

हां, मैं समझता हूं कि आप अभी क्या सोच रहे हैं: यह शब्द "टॉगल" का मतलब ही नहीं है। Internet Explorer के पीछे के लोग? इससे सहमत हैं और दूसरे पैरामीटर का उपयोग किए बिना अपना विरोध व्यक्त करें।

लेकिन चलो इसे वापस लाएं। विकल्पों की स्वतंत्रता!

नंबर 5। क्वेरीसेलेक्टर ()

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

उदाहरण: myElement.querySelector ('। My-class') उन तत्वों के पत्राचार को दिखाएगा जिनमें मेरी कक्षा के वर्ग और myElement के "बच्चे" हैं।

नंबर 6। निकटतम

यह विधि उन सभी तत्वों के लिए उपलब्ध है जो तत्व वृक्ष को देखते हैं। यह querySelector () के लिए थोड़ा उल्टा है। इसलिए, हम वर्तमान खंड के शीर्षक का इस तरह उपयोग कर सकते हैं:

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

हम लेख के साथ शुरू करते हैं और पहले h1 के साथ समाप्त होते हैं।

अंक 7। 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) { // do something }  ,     : if (myElement.className.includes('some-class')) { // do something } 

आपको क्या चाहिए:

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

नंबर 9। सम्मिलित करें

मैंने आज इसकी खोज की! यह appendChild () के समान है, लेकिन बच्चे को जोड़ने की प्रक्रिया में थोड़ा और नियंत्रण देता है।

parentEl.insertAdjacentElement ('इससे ​​पहले', newEl) parentEl.appendChild (newEl) के समान ही करता है, लेकिन आप इससे पहले बताए जा रहे हैं कि ये नाम बताए गए स्थान पर रख सकते हैं।

कितना नियंत्रण!

नंबर 10। शामिल हैं ()

क्या आपने कभी जानना चाहा है कि क्या कोई तत्व दूसरे के अंदर है? मैं हर समय यह जानना चाहता हूं।

उदाहरण के लिए, यदि मैं माउस क्लिक को हैंडल करता हूं और समझना चाहता हूं कि क्या यह अंदर या बाहर हुआ (ताकि मैं इसे बंद कर सकूं), तो मैं यह करता हूं:

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

यहाँ मोडल एल मोडल विंडो का संदर्भ है, और e.target पर क्लिक करने वाला तत्व है।

यह हास्यास्पद है, लेकिन जब मैं पहली बार विधि का उपयोग करने की कोशिश करता हूं तो मैं अक्सर तर्क में गलतियां करता हूं। और फिर जब मैं त्रुटि को ठीक करने की कोशिश करता हूं, तो मैं फिर से गलत हूं। और यह विधि तुरंत इससे निपटने में मदद करती है।

नंबर 11। getAttribute ()

तत्वों के सबसे बेकार तरीकों में से एक, लेकिन इस विशेष मामले में नहीं।

क्या आपको याद है कि आमतौर पर गुण विशेषताओं को संदर्भित करते हैं?

कभी-कभी यह मामला नहीं होता है, उदाहरण के लिए, जब href किसी तत्व का गुण होता है, उदाहरण के लिए href = "/ जानवरों / बिल्ली"> बिल्ली </ a।

जैसा कि आप उम्मीद कर सकते हैं el.href हमें / पशु / बिल्ली नहीं देगा। ऐसा इसलिए है क्योंकि तत्व HTMLHyperlinkElementUtils इंटरफ़ेस को लागू करता है, जो प्रोटोकॉल और हैश की तरह सहायक गुणों का एक समूह है जो लिंक ऑब्जेक्ट को इंगित करता है।

यह उन उपयोगी href प्रॉपर्टीज में से एक है जो फुल L को देंगी, न कि विशेषता में संबंधित URL को।

इसलिए यदि आपको href विशेषता के अंदर शाब्दिक स्ट्रिंग की आवश्यकता है, तो आपको el.getAttribute ('href') का उपयोग करना चाहिए।

नंबर 12। संवाद

अपेक्षाकृत नए संवाद तत्व में दो अच्छे तरीके हैं और एक आदर्श है। शो () और नज़दीकी () वही करें जो उनसे अपेक्षित है। और यह अच्छा है, मुझे लगता है

लेकिन showModal () पृष्ठ पर रखे गए किसी भी अन्य तत्व के शीर्ष पर एक संवाद प्रदर्शित करेगा। Z- इंडेक्स की आवश्यकता नहीं है, या मैन्युअल रूप से मंद पृष्ठभूमि जोड़ने, या एस्केप बटन के दबाने पर नज़र रखने की आवश्यकता है। ब्राउज़र जानता है कि मोडल विंडोज़ कैसे काम करती है और आपके लिए सब कुछ करेगी। और वह महान है।

नंबर 13। फॉरच ()

कभी-कभी, जब आपको तत्वों की सूची के संदर्भ की आवश्यकता होती है, तो आप forEach () का उपयोग कर सकते हैं।

लेकिन क्या होगा यदि आपको सभी पेज लिंक के लिए सभी URL लॉग इन करने की आवश्यकता है? आप ऐसा कर सकते हैं और त्रुटि देख सकते हैं।

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

या ऐसा करें:

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

बिंदु यह है, getElementsByTagName और अन्य प्राप्त करें ... विधियाँ HTMLCollection लौटाती हैं, लेकिन querySelectorAll एक NodeList देता है।

और NodeList इंटरफ़ेस हमें forEach () विधि (कुंजियों के साथ), मान, (और प्रविष्टि) () देता है।

ECMA के अच्छे लोगों ने हमें Array.from () दिया, जो एक सरणी में खुद को एक सरणी की तरह दिखने वाली हर चीज को बदल देता है।

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

बोनस! एक सरणी बनाते समय, आप मानचित्र (), और फ़िल्टर (), और कम (), या किसी अन्य विधि का उपयोग कर सकते हैं। उदाहरण के लिए, बाहरी लिंक की एक सरणी लौटना:

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

मैं वास्तव में।

नंबर 14। फार्म

फॉर्म , जैसा कि आप शायद पहले से ही जानते हैं, एक जमा () विधि है। कुछ हद तक कम संभावना है कि आप जानते हैं कि रूपों में एक रीसेट () विधि है और यदि आप अपने प्रपत्र तत्वों पर सत्यापन का उपयोग करते हैं तो एक वैधता () मूल्य की रिपोर्ट कर सकते हैं।

आप किसी तत्व को उसके नाम विशेषता द्वारा संदर्भित करने के लिए प्रपत्र तत्वों के डॉट नोटेशन गुण का भी उपयोग कर सकते हैं। उदाहरण के लिए, myFormEl.elements.email इनपुट नाम = "ईमेल" / तत्व जो कि फॉर्म के अंतर्गत आता है ("अंतर्गत आता है" जरूरी नहीं होगा कि यह इसका "वंशज" है)।

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

उदाहरण: यदि आपके पास तीन रेडियो बटन हैं, प्रत्येक का नाम जानवर के समान है, तो formEl.elements.animal आपको रेडियो बटन के इस सेट का लिंक देगा (1 नियंत्रण, 3 तत्व)।

और formEl.elements.animal.value चयनित रेडियो बटन का मान लौटाएगा।

यह एक अजीब वाक्यविन्यास है, अगर आप इसके बारे में सोचते हैं। इसे लोगों को तोड़ें: formEl एक तत्व है, तत्व एक HTMLFormControlsCollection हैं, न कि काफी-एक सरणी, जहां प्रत्येक तत्व आवश्यक रूप से HTML तत्व नहीं है। जानवरों के पास कई स्विच संयुक्त हैं केवल इसलिए कि उनके पास समान नाम विशेषता है (इसके लिए एक RadioNodeList इंटरफ़ेस है), और मूल्य संग्रह में किसी भी स्विच के मूल्य विशेषता के माध्यम से दिखता है।

संख्या 15। चयन करें ()

.Select () विधि आपके द्वारा कॉल किए जाने वाले किसी भी इनपुट में सभी पाठ का चयन करेगी।

पढ़ने के लिए धन्यवाद, मुझे उम्मीद है कि यह सब आपके लिए उपयोगी होगा। हमेशा अपने ब्राउज़र की क्षमताओं की जांच करें, ताकि बाद में यह कष्टदायी रूप से दर्दनाक न हो।

स्किलबॉक्स से प्रैक्टिकल , जो एक नौसिखिया प्रोग्रामर को एक वांछित विशेषज्ञ बनने में मदद करेगा:

• "जावा डेवलपर"
• PHP डेवलपर 0 से PRO तक
• स्क्रैच से अजगर डेवलपर