getAttribute () बनाम तत्व ऑब्जेक्ट गुण?

Question

अभिव्यक्तियां एक ही चीज को पसंद करती हैं Element.getAttribute("id")और Element.idवापस करती हैं।

जब हमें HTMLElement वस्तु के गुणों की आवश्यकता होती है, तो किसका उपयोग किया जाना चाहिए?

क्या इन तरीकों के साथ कोई क्रॉस ब्राउज़र समस्या है getAttribute()और setAttribute()?

या इन विशेषताओं विधियों का उपयोग करके सीधे वस्तु गुणों तक पहुँचने के बीच प्रदर्शन पर कोई प्रभाव?

Comments

इसी तरह के प्रश्न: गुण और गुण HTML में

— sleske

Answer 1

getAttributeDOM तत्व की विशेषता को पुनः प्राप्त करता है , जबकि इस DOM तत्व el.idकी संपत्ति को पुनः प्राप्त करता है । वे एक जैसे नहीं हैं।

अधिकांश समय, DOM गुण विशेषताओं के साथ सिंक्रनाइज़ किए जाते हैं।

हालाँकि, सिंक्रनाइज़ेशन समान मान की गारंटी नहीं देता है । एक उत्कृष्ट उदाहरण के बीच है el.hrefऔर el.getAttribute('href')एक एंकर तत्व के लिए।

उदाहरण के लिए:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

यह व्यवहार इसलिए होता है क्योंकि W3C के अनुसार , href प्रॉपर्टी एक अच्छी तरह से बनाई गई कड़ी होनी चाहिए। अधिकांश ब्राउज़र इस मानक का सम्मान करते हैं (अनुमान है कि कौन नहीं?)।

वहाँ के लिए एक और मामला है inputकी checkedसंपत्ति। DOM प्रॉपर्टी रिटर्न trueया falseजबकि विशेषता स्ट्रिंग "checked"या एक खाली स्ट्रिंग लौटाता है ।

और फिर, कुछ गुण हैं जो केवल एक ही तरीके से सिंक्रनाइज़ हैं । सबसे अच्छा उदाहरण valueएक inputतत्व की संपत्ति है । DOM प्रॉपर्टी के माध्यम से इसके मूल्य को बदलने से विशेषता नहीं बदलेगी (संपादित करें: अधिक सटीकता के लिए पहली टिप्पणी की जाँच करें)।

इन कारणों के कारण, मेरा सुझाव है कि आप DOM गुणों का उपयोग करते रहें , न कि विशेषताओं का, क्योंकि उनका व्यवहार ब्राउज़रों के बीच भिन्न होता है।

वास्तव में, केवल दो मामले हैं जहां आपको विशेषताओं का उपयोग करने की आवश्यकता है:

1. एक कस्टम HTML विशेषता, क्योंकि यह DOM प्रॉपर्टी के लिए सिंक नहीं की जाती है।
2. एक अंतर्निहित HTML विशेषता तक पहुंचने के लिए, जो संपत्ति से समन्वयित नहीं है, और आपको यकीन है कि आपको विशेषता की आवश्यकता है (उदाहरण के लिए, valueएक inputतत्व का मूल )।

यदि आप अधिक विस्तृत स्पष्टीकरण चाहते हैं, तो मैं दृढ़ता से सुझाव देता हूं कि आप इस पृष्ठ को पढ़ें । यह आपको केवल कुछ मिनट लगेगा, लेकिन आपको जानकारी (जो मैंने यहां बताई है) से प्रसन्नता होगी।

Comments

आमतौर पर अच्छी सलाह के लिए +1। सिंक्रनाइज़ेशन चीज हालांकि थोड़ी सी बंद है: valueएक इनपुट की संपत्ति को इसकी प्रारंभिक कीमत विशेषता से मिलती है, लेकिन अन्यथा इसे बिल्कुल भी नहीं बांधा जाता है। valueविशेषता पूरी तरह बजाय से समन्वयित है defaultValueसंपत्ति। इसी तरह checkedऔर defaultChecked। पुराने IE (<= 7 और संगतता मोड बाद में) को छोड़कर, जो टूट गया है getAttribute()और setAttribute()।

— टिम डाउन

अपनी टिप्पणी को "आगे की

— व्याख्या

मुझे लगता है कि आपको पहला उदाहरण गलत मिला है। a.hrefपूर्ण URL a.getAttribute("href")लौटाता है , एचटीएमएल स्रोत में डिफेंड के समान ही विशेषता देता है।

— सलमान ए

यदि आप यह पता लगाने की कोशिश कर रहे हैं कि क्या कोई मान गैर-डिफ़ॉल्ट है, तो आप विशेषताओं का उपयोग करके बेहतर हैं। कई आधुनिक ब्राउज़र एक डिफ़ॉल्ट मान (जैसे input.formAction) या खाली स्ट्रिंग (जैसे a.download) वापस कर देंगे , जो चीजों को अस्पष्ट बनाता है। एकमात्र अपवाद ऐसे मान हैं जो 2-तरह से समन्वयित नहीं हैं, जैसे कि value।

— केविन ली

अगर आईडी को डोम में बिल्कुल भी सेट नहीं किया गया है, तो getAttribute null और element.id को खाली स्ट्रिंग लौटा देगा। क्या यह एक मानक है?

— मैकीज क्रैसेज़क

Answer 2

getAttribute('attribute') सामान्यतः स्ट्रिंग के रूप में विशेषता मान लौटाता है, जैसा कि पृष्ठ के HTML स्रोत में परिभाषित किया गया है।

हालाँकि, element.attributeविशेषता का सामान्यीकृत या परिकलित मान लौटा सकता है। उदाहरण:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href में पूर्ण URL होगा
• <input type="checkbox" checked>
  • input.checked सच होगा (बूलियन)
• <input type="checkbox" checked="bleh">
  • input.checked सच होगा (बूलियन)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • छवि लोड होने से पहले img.width 0 (संख्या) होगा
  • img. उपलब्धता 64 (संख्या) होगी जब छवि (या इसके पहले कुछ बाइट्स) लोड होती है
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width गणना की जाएगी 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width 50 (संख्या) होगा
• <div style='background: lime;'></div>
  • div.style एक वस्तु होगी

Answer 3

.idफ़ंक्शन कॉल को ओवरहेड बचाता है। (जो बहुत छोटा है, लेकिन आपने पूछा।)

Comments

हाय गर्डोरन, बस जिज्ञासा के लिए: मैंने इसके बारे में एक 'आधिकारिक' स्पष्टीकरण खोजने की कोशिश की (अनुभवजन्य परीक्षण से परे, जो पर्याप्त स्पष्ट है;)) लेकिन बिना किसी सफलता के। क्या आपके पास इसके बारे में कोई लिंक है?

— ममू

Answer 4

इस के अनुसार jsPerf परीक्षण संपत्ति की getAttributeतुलना में अधिक धीमा है id।

पुनश्च

ताज्जुब है कि दोनों बयान IE8 (अन्य ब्राउज़रों की तुलना में) पर बहुत खराब प्रदर्शन करते हैं।

Answer 5

हमेशा गुणों का उपयोग करें जब तक कि आपके पास कोई विशिष्ट कारण न हो।

• getAttribute()और setAttribute()पुराने IE (और बाद के संस्करणों में संगतता मोड) में टूट गए हैं
• गुण अधिक सुविधाजनक हैं (विशेष रूप से, बूलियन विशेषताओं के अनुरूप)

हैं कुछ अपवाद :

• <form>तत्वों की पहुँच के गुण
• कस्टम विशेषताओं तक पहुँच (हालाँकि मैं कस्टम विशेषताओं का उपयोग करके हतोत्साहित करूँगा)

मैंने SO पर इस विषय के बारे में कुछ बार लिखा है:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

Comments

IE 8 से पहले, गुणों और विशेषताओं को पहचानकर व्यवहार किया गया था । जैसा कि आपने पहले बताया था, गुण जाने का रास्ता हैं।

@MattMcDonald: हां, यही वह टूटन है जिसके लिए मैं आनाकानी कर रहा था। मैंने इस उत्तर में इसका विस्तार नहीं किया क्योंकि मुझे लगा कि मैंने अन्य उत्तरों में इतना पर्याप्त काम किया है जो :) से जुड़ा हुआ है

— टिम डाउन

Answer 6

इसे पूरी तरह समझने के लिए नीचे दिए गए उदाहरण का प्रयास करें। नीचे DIV के लिए

<div class="myclass"></div>

Element.getAttribute('class')वापस आ जाएगी myclass, लेकिन आप उपयोग करने के लिए है Element.classNameजो यह डोम संपत्ति से प्राप्त करता है।

Answer 7

एक क्षेत्र जहां यह एक बड़ा अंतर बनाता है वह विशेषताओं के आधार पर सीएसएस स्टाइल के साथ है।

निम्नलिखित को धयान मे रखते हुए:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

कस्टम सेट के साथ div सीधे विशेषता के मूल्य को प्रतिबिंबित नहीं करता है, और div[custom]सीएसएस में हमारे विशेषता चयनकर्ता ( ) द्वारा चयनित नहीं है ।

कस्टम विशेषता सेट के साथ div setAttribute, हालांकि, सीएसएस विशेषता चयनकर्ता का उपयोग करके चयनित किया जा सकता है, और तदनुसार स्टाइल किया गया है।