नई डोम एपीआई

इस लेख में मैं DOM API में नवीनतम के बारे में बात करूंगा, जिसका उपयोग हम अभी या निकट भविष्य में कर सकते हैं।
लेख का प्रकाशन Google क्रोम में कुछ नए DOM4 एपीआई तरीकों के कार्यान्वयन की शुरुआत की खुशी की घटना को समर्पित है। कई विधियों और गुणों का उपयोग अब किया जा सकता है, उनमें से कुछ उपसर्गों के माध्यम से काम करते हैं, लेकिन प्रत्येक विधि या संपत्ति के लिए मैं पॉलीफ़िल देने की कोशिश करूंगा जो उन्हें लागू करता है या ब्राउज़र उपसर्गों को डिस्कस करता है।
मैंने Google क्लोजर कंपाइलर के लिए JSDoc के अनुसार विधियों का वर्णन करने की कोशिश की।

DOM4 उत्परिवर्तन विधियाँ

विनिर्देश

Element.prototype में बहुत ही दिलचस्प तरीके हैं जो jQuery के प्रेमियों से परिचित होंगे, लेकिन वे थोड़े अलग तरीके से काम करते हैं।

• append(...{(Node|string)})
• prepend(...{(Node|string)})
• before(...{(Node|string)})
• after(...{(Node|string)})
  
  विधि n-th संख्या नोड्स को वर्तमान नोड में सम्मिलित करती है। नोड्स को फ़ंक्शन के लिए तर्क के रूप में पारित किया जाता है (उदाहरण के लिए: node.append(otherNode1, otherNode2) ।
  इसके साथ, आप एक नोड के बजाय पाठ को पास कर सकते हैं, और यह स्वचालित रूप से TextNode में बदल जाता है, जैसे कि आपने document.createTextNode(text) कहा था।
  append फ़ंक्शन नोड्स की अपनी सूची के अंत में नोड्स सम्मिलित करता है after वर्तमान नोड before और after कार्यों before और after क्रमशः शुरू होता है।
  
  
• remove()
  विधि पैरेंट से करंट नोड को हटा देती है।
• replace(...{(Node|string)})
  विधि वर्तमान नोड को एक या अधिक नोड्स के साथ बदल देती है जो विधि पैरामीटर के रूप में निर्दिष्ट हैं।
  
  इन सभी तरीकों का कोई रिटर्न मूल्य नहीं है।
  

इस तरह का एक पैटर्न आपको नोडोडिस्ट या इस पद्धति के नोड्स के साथ एक सरणी पास करने की अनुमति देगा:

 element.append.apply(element, document.querySelectorAll("div")) 

document में छह में से दो तरीके जोड़े गए document : append और प्रस्तुत करना।

सभी DOM4 म्यूटेशन विधियों में से, Google Chrome के नवीनतम संस्करण में केवल remove ।
सभी ब्राउज़रों के लिए इन विधियों का पॉलीफ़िल मेरे पुस्तकालय में है ।

DOM चयनकर्ता API 2: NodeRef और: गुंजाइश

विनिर्देश

• document.querySelector(string, NodeRef{(Node|NodeList|Array.<Node>)})
• document.querySelectorAll(string, NodeRef{(Node|NodeList|Array.<Node>)})
• document.find(string, NodeRef{(Node|NodeList|Array.<Node>)})
• document.findAll(string, NodeRef{(Node|NodeList|Array.<Node>)})

अच्छे पुराने क्वेरीसेलर [सभी] तरीकों को एक दूसरा पैरामीटर मिला, लेकिन केवल document लिए कार्यान्वयन में। और यह भी कि नए तरीकों से [सभी] जोड़े गए।

दूसरा पैरामीटर आपको उस संदर्भ को निर्दिष्ट करने की अनुमति देता है जिसमें हम चयनकर्ता द्वारा नोड्स की खोज करेंगे। उदाहरण के लिए:

 document.findAll("li", [ulElement1, ulElement2]) 

दो तत्वों ulElement1 और ulElement2 में सभी <li> तत्व खोजें ।

: गुंजाइश छद्म वर्ग आपको वास्तव में शांत चीजें करने की अनुमति देता है। यह खोज संदर्भ निर्दिष्ट करने का एक और तरीका है - यह वर्तमान तत्व को इंगित करता है जिसमें हम चयनकर्ता द्वारा खोज करते हैं।
यह आपको पहले अमान्य चयनकर्ताओं "> .class" या "~ tagname" द्वारा खोजने की अनुमति देता है। बस निर्दिष्ट करें : शुरुआत में गुंजाइश और ये चयनकर्ता मान्य हो जाएंगे। सभी शक्ति : गुंजाइश तब दिखाई देती है जब
हम इसे NodeRef के साथ मिलकर लागू करते हैं:

 document.querySelectorAll(":scope > p", [divElement1, divElement2]) 

यह divElement1 और divElement2 में टैग पी के साथ सभी तत्काल बच्चों को मिलेगा ! मैं यह नोट करना चाहता हूं कि आप छद्म वर्ग को findAll सकते findAll : find और findAll लिए गुंजाइश । इन विधियों के लिए, ऐसी कॉल को वैध माना जाता है:

 document.findAll("> p", [divElement1, divElement2]) 

WebKit वर्तमान में: स्कोप छद्म श्रेणी का समर्थन करता है, लेकिन यह गलत है । अच्छी खबर यह है कि मेरी बग रिपोर्ट के बाद, गलत समर्थन : गुंजाइश को हटा दिया जाएगा । यदि आपको अभी भी इस छद्म वर्ग के सही समर्थन की जांच करने की आवश्यकता है, तो यहां इसके लिए कोड है: जिस्ट ।
find[All] और : गुंजाइश में querySelectorAll लिए समर्थन, जो कि मैं अभी कर रहा हूं उस विनिर्देश से मेल खाता है।

Element.prototype.matches

विनिर्देश

इस विधि को पहले मैचसेंटर कहा जाता था। यह CSS चयनकर्ता के खिलाफ नोड की जाँच करता है।
ब्राउजिंग उपसर्गों के साथ छोटा पॉलीफ़िल: जिस्ट । मेरी लाइब्रेरी में अधिक उन्नत संस्करण।

classList

विनिर्देश

तत्व सीएसएस कक्षाओं के साथ काम करने के लिए डोम एपीआई।

विधि:

• add(...class{string}) a class को element.className में जोड़ता है
  
• remove(...class{string}) तत्व से वर्ग निकालता है ।className
  
• toggle(boolean: class{string}) तत्व से मौजूद है तो क्लास को हटाता है ।className और गलत देता है । Element.className की कमी के मामले में जोड़ता है और सही लौटाता है ।
• contains(boolean: class{string}) तत्व में एक वर्ग के लिए जाँच करता है ।className । क्रमशः सही या गलत रिटर्न देता है ।

पहले, add और remove मेथड्स एक समय में केवल एक ही क्लास के साथ काम करते थे, और हाल ही में कई CSS क्लास के साथ काम करने की क्षमता को मानक में जोड़ा गया है :

 document.documentElement.classList.add("test1", "test2", "test3") document.documentElement.classList.remove("test1", "test2", "test3") 

classList लिए classList , जबकि पुराने विनिर्देश, मेरी लाइब्रेरी में है । जल्द ही एक नया संस्करण उपलब्ध होगा, जो पुराने कार्यान्वयन को पैच कर देगा।

इवेंट कंस्ट्रक्टर

विनिर्देश

नया DOM API मानक ईवेंट कंस्ट्रक्टर्स को परिभाषित करता है। अब हम उस पीड़ा के बारे में भूल सकते हैं

 event = document.createEvent("click") event.initMouseEvent( /* -,      */ ) 

और बस लिखें:

 event = new Event("click") 

हम किसी भी पाठ मान को e.type को e.type रूप में पास कर सकते हैं, दूसरा पैरामीटर एक ऑब्जेक्ट है जिसमें इनिशियलाइज़ेशन पैरामीटर बुलबुले और रद्दीकरण शामिल हैं । गलत पर सेट बुलबुले घटना को पॉप अप करने से रोकेंगे। झूठे सेट को रद्द करने से घटना को रोकने के लिए रोका जा सकेगा और उसे रोकने के तरीके के माध्यम से रोका जा सकेगा ।
डिफ़ॉल्ट रूप से, बुलबुले और रद्द करने योग्य झूठे हैं ।

 event = new Event("some:event", {bubbles : true, cancelable : false}) event = new Event("dbclick1") element.dispachEvent(event) 

यदि आपको हैंडलर के लिए डेटा जोड़ने की आवश्यकता है, तो आपको उन्हें event ऑब्जेक्ट में जोड़ने की आवश्यकता है:

 event = new Event("click") event.button = 1 

मैं ध्यान देता हूं कि इस मामले में, इस तरह से बनाई गई सभी घटनाएं सामान्य घटनाएं हैं, अर्थात्। new Event("click") एक माउसइवेंट नहीं बनाएगा, लेकिन केवल एक ईवेंट ।

ईवेंट बनाने के लिए दूसरा वर्ग CustomEvent । इस वर्ग का उपयोग केवल इस बात में भिन्न होता है कि आप प्रारंभिक संपत्ति को आरंभीकरण वस्तु में पास कर सकते हैं।

 event = new CustomEvent("somecustom:event", {bubbles : true, cancelable : false, detail : {"some data" : 123}}) 

Event और CustomEvent एंड्रॉइड वेबकिट ब्राउज़र को छोड़कर सभी आधुनिक ब्राउज़रों (एक वर्ष से अधिक के लिए) में लागू किए CustomEvent हैं। पुराने ब्राउज़रों के लिए पॉलीफिल ।

इसके अलावा, कीबोर्ड, ड्रैग एंड ड्रॉप और माउस की विशेष घटनाओं के लिए एक चर्चा है। लेकिन अभी तक वे किसी भी ब्राउज़र द्वारा कार्यान्वित नहीं किए गए हैं।
(नोट: ओपेरा 12.10 कीबोर्डएवेंट के लिए कंस्ट्रक्टर का समर्थन करता है, लेकिन यह विनिर्देश के अनुसार काम नहीं करता है )

HTMLLabelElement.prototype.control और HTML * तत्व के लिए Element.prototype.labels

नियंत्रण के लिए विशिष्टता

नियंत्रण गुण में प्रपत्र तत्व का लिंक होता है जिसके साथ यह <label> तत्व जुड़ा होता है:

 label.control.value = "123" 

याद रखें कि विनिर्देशन द्वारा, एक एकल <label> तत्व में केवल एक संबद्ध प्रपत्र तत्व हो सकता है।

लेबल के लिए विशिष्टता

इसके विपरीत, लेबल गुण, प्रपत्र तत्व के लिए <label> तत्वों के नोडलिस्ट होते हैं। NodeList, क्योंकि विनिर्देशन द्वारा, एक एकल रूप तत्व में कई संबंधित <label> तत्व हो सकते हैं।

 console.log(input.labels.length) 

अधिकांश ब्राउज़रों में गुण लागू होते हैं। पुराने ब्राउज़रों के लिए पॉलीफिल

HTMLOlElement.prototype.reversed

विनिर्देश

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

 <ol reversed> <li>  1</li> <li>  2</li> <li>  3</li> <li>  4</li> <li>  5</li> </ol> 

इसकी व्याख्या ब्राउज़र द्वारा की जाएगी:

  5. सूची आइटम 1
 4. सूची आइटम 2
 3. सूची आइटम 3
 2. सूची 4
 1. सूची आइटम 5

और यह मार्कअप:

 <ol reversed start=100> <li>  1</li> <li>  2</li> <li>  3</li> <li>  4</li> <li>  5</li> </ol> 

ब्राउज़र द्वारा व्याख्या की जाएगी:

  100. सूची आइटम 1
 99. सूची आइटम 2
 98. सूची आइटम 3
 97. सूची आइटम 4
 96. सूची आइटम 5

उलटी हुई संपत्ति के लिए समर्थन Google Chrome में है। अन्य ब्राउज़रों के लिए पॉलीफ़िल है ।

Event.prototype.stopImmediatePropagation

विनिर्देश

विधि jQuery से समान विधि के समान कार्य करती है।

संक्षेप में, यह न केवल ईवेंट पॉपअप को रोकता है, बल्कि निम्न ईवेंट हैंडलर को निष्पादित किए बिना, ईवेंट को तुरंत संसाधित करता है।

संस्करण 12.10 से पहले केवल ओपेरा इस पद्धति का समर्थन नहीं करता है। उसके लिए पॉलीफिल ।

IE <9 का समर्थन करें

IE8 में डोम ऑब्जेक्ट्स के प्रोटोटाइप हैं, इसलिए वहां समर्थन जोड़ना आसान है। मैंने IE8 के लिए पॉलीफ़िल को एक अलग फ़ाइल में डाला और इसे सशर्त टिप्पणियों के माध्यम से संलग्न किया।

IE6 / 7 के लिए, सब कुछ अधिक जटिल है, आपको या तो उनके लिए DOM API को पूरी तरह से या पूरी तरह से लागू करने के लिए इन ब्राउज़रों को छोड़ना होगा, जो मैंने किया था, जिसका मैंने IE <8 सहित सभी ब्राउज़रों के लिए अपने लेख DOM-shim में वर्णन किया था।

लेख कोड github पर पोस्ट किया गया है। यदि आप कोई मदद करना चाहते हैं या कोई गलती ढूंढना चाहते हैं, तो एक अनुरोध करें या मुझे व्यक्तिगत रूप से लिखें। टिप्पणियों में भी लिखें यदि आपको किसी विषय पर अधिक विस्तार से विचार करने की आवश्यकता है या अधिक उदाहरणों की आवश्यकता है।