GetElementsByTagName() से विशेषताओं को प्राप्त करने के लिए सबसे अच्छी विधि?

Question

मैं link टैग के गुण प्राप्त करने के साथ चारों ओर खेल रहा हूं, विशेषताओं तक पहुंचने के कई तरीके हैं:

document.getElementsByTagName("link")[0]['media'] 
document.getElementsByTagName("link")[0].media 
document.getElementsByTagName("link")[0].getAttribute('media') 
document.getElementsByTagName("link")[0].attributes['media'] 

यह हास्यास्पद पर सीमा है कि एक ही डेटा के कितने पथ हैं। क्या इन तरीकों में से एक बाकी के लिए कहीं बेहतर है?

Answer 1

मैं इस मामले के लिए .media का उपयोग करूंगा, क्योंकि media वास्तव में लिंक तत्व पर एक संपत्ति है।

• ['media']: वर्ग कोष्ठक अंकन का उपयोग "मीडिया" संपत्ति के मूल्य पुन: प्राप्त करता इनमें से प्रत्येक यह फायदा नहीं है है। जब आप डिज़ाइन समय पर संपत्ति का नाम नहीं जानते हैं तो स्क्वायर ब्रैकेट नोटेशन का उपयोग करें। उदाहरण के लिए, जब पुनरावृत्त गुण।
• .media: "मीडिया" संपत्ति मान पुनर्प्राप्त करता है। मैं ज्यादातर मामलों में इसका इस्तेमाल करता हूं। यह संपत्ति मूल्य के लिए संक्षिप्त, सीधी पहुंच प्रदान करता है।
• .getAttribute('media'): "मीडिया" विशेषता मान पुनर्प्राप्त करता है। इसका उपयोग तब करें जब आप उस विशेषता का मान चाहते हैं जो आवश्यक रूप से तत्व पर एक संपत्ति नहीं है। सभी गुण गुण नहीं हैं और सभी गुण गुण नहीं हैं।
• .attributes['media']: "मीडिया" विशेषता नोड पुनर्प्राप्त करता है। विशेषताओं की तुलना में किसी विशेषता के बारे में अधिक जानकारी की आवश्यकता होने पर विशेषता संग्रह का उपयोग करें। उदाहरण के लिए, विशेषता का नाम। आप मूल्य प्राप्त करने के लिए आसानी से इसका उपयोग भी कर सकते हैं, क्योंकि .toString() मान देता है, लेकिन अगर आप चाहते हैं तो यह अधिक हो सकता है। attributes संग्रह iterating the attributes of an element के लिए भी उपयोगी है।

Answer 2

पहले दो विकल्प समान हैं। आप या तो उपयोग कर सकते हैं। मैं व्यक्तिगत रूप से .media संस्करण पसंद करता हूं क्योंकि मुझे लगता है कि यह आसान पढ़ता है।

अंतिम दो विकल्प getAttribute() और setAttribute() पर निर्भर करते हैं जो हमेशा IE में विश्वसनीय नहीं होते हैं। आप reference that Matt posted में इसके बारे में बहुत कुछ पढ़ सकते हैं। इस प्रकार, मैं अपने सभी चार विकल्पों में से .media संस्करण को सबसे विश्वसनीय और सबसे पठनीय के रूप में पसंद करता हूं।

Answer 3

कार्यात्मक रूप से, वे बराबर हैं।

प्रदर्शन-वार, पहले दो एक महत्वपूर्ण कारक से बेहतर हैं - हालांकि वे सभी बेहद तेज़ हैं। this JSPerf test देखें।

व्यावहारिक रूप से बोलते हुए, पहले दो पढ़ने के लिए आसान हैं, और मेरी व्यक्तिगत वरीयता दूसरी है। (यह भी एक बाल तेज है।)

Answer 4

जिस विधि को आप ढूंढ रहे हैं उसे getElementsByTagName कहा जाता है। यह तत्वों की एक सरणी जैसी सूची देता है (जो एक सरणी नहीं है)।

ध्यान दें कि आपका अंतिम नमूना .attributes['media'] अन्य विधियों के रूप में एक स्ट्रिंग नहीं लौटाता है। यह इसके बजाय एक विशेषता नोड देता है।

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

थोड़ा अधिक तकनीकी विस्तार को जोड़ने के लिए है, हालांकि अलग तरीके से एक ही तरीके समय इस न के बराबर विशेषताओं के लिए जरूरी सच नहीं है का सबसे लौटने। निम्न HTML को उदाहरण के रूप में लें: <a href='test'>। आप इसे (नीचे उत्पादन फ़ायरफ़ॉक्स से है) a test jsFiddle के दूसरे ब्राउज़र अपने आप कोशिश कर सकते हैं।

// Get reference to element 
var a = document.getElementsByTagName('a')[0]; 

// Existent attributes 
console.log(a.href); // String: http://fiddle.jshell.net/_display/test 
console.log(a.getAttribute('href')); // String: test 
console.log(a.attributes['href']); // Attribute node: href 

ध्यान दें कि एक बार एक पूर्ण यूआरआई वापस लौटा दिया गया था, दूसरी बार मूल मूल्य वापस कर दिया गया था।

// Existent invalid attributes 
console.log(a.other); // undefined 
console.log(a.getAttribute('other')); // String: thing 
console.log(a.attributes['other']); // Attribute node: other 

पेज लोड पर मौजूद सभी चीजें डीओएम में विलय हो जाती हैं लेकिन अवैध होने पर संपत्ति के रूप में उपलब्ध नहीं होती हैं।

// Inexistent but valid attributes 
console.log(a.title); // Empty string 
console.log(a.getAttribute('title')); // null 
console.log(a.attributes['title']); // undefined 

पहली कॉल ने गुणों को डिफ़ॉल्ट मान दिया। फिर हम एक गैर-मौजूद विशेषता के लिए एक मार्कर के रूप null देखा। आखिरकार हमें एक तथाकथित नामांकित नोडमैप मिला जो एक सरणी और वस्तु के मिश्रण की तरह कुछ है। किसी ऑब्जेक्ट के रूप में इसे एक्सेस करने से undefined मान दिया गया।

// Creating attributes 
a.setAttribute('title', 'test title'); 
console.log(a.title); // String: test title 
console.log(a.getAttribute('title')); // String: test title 
console.log(a.attributes['title']); // Attribute node: title 

गुण भी संपत्ति के रूप में उपलब्ध हो जाता है। एक मान्य विशेषता के लिए

// Creating "attributes" by using property 
a.rel = 'test rel'; 
console.log(a.rel); // String: test rel 
console.log(a.getAttribute('rel')); // String: test rel 
console.log(a.attributes['rel']); // Attribute node: rel 

स्थापना संपत्ति भी attributes मानचित्र में एक प्रविष्टि बनाता है। a पर

// Inexistent invalid attributes 
console.log(a.dummyInvention); // undefined 
console.log(a.getAttribute('dummyInvention')); // null 
console.log(a.attributes['dummyInvention']); // undefined 

संपत्ति का उपयोग, मार्कर वापसी मान और नोड नक्शे पर सूचकांक का उपयोग कर सकते।

// Creating invalid attributes via setAttribute 
a.setAttribute('title2', 'test title2'); 
console.log(a.title2); // undefined 
console.log(a.getAttribute('title2')); // String: test title2 
console.log(a.attributes['title2']); // Attribute node: title2 

गुण बनाया जाता है, भले ही इसके विद्यमान अमान्य है, लेकिन यह संपत्ति के रूप में उपलब्ध नहीं है।

// Creating invalid "attributes" via property 
a.title3 = 'test title3'; 
console.log(a.title3); // String: test title3 
console.log(a.getAttribute('title3')); // null 
console.log(a.attributes['title3']); // undefined 

वस्तु a बढ़ाया है लेकिन डोम अछूता है।

// NamedNodeMap of length 4 and indexes other, href, title, rel, title2 (valid attributes or result of setAttribute in order of creation except those from parsing) 
console.log(a.attributes); 

नोड मानचित्र केवल डोम की वर्तमान स्थिति को दर्शाता है। इससे हमारे वस्तु a कि हम getElementsByTagName के माध्यम से प्राप्त करने के लिए विस्तार के बारे में पता नहीं है।

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

मैं अंतिम नामांकित नोडमैप पर एक टिप्पणी की सराहना करता हूं क्योंकि मैं जानना चाहता हूं कि पार्सिंग से गुणों के क्रम को त्यागने के लिए फ़ायरफ़ॉक्स का व्यवहार सही है या नहीं।