2014-09-19 7 views
10

1) प्रश्न 1दस्तावेज़.getElementById क्यों आवश्यक नहीं है?

निम्न उदाहरण "document.getElementById ('MyID')" का उपयोग किए बिना काम करता है। वह क्यों है और "document.getElementById ('myId')" को छोड़ना ठीक है?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Javascript question</title> 

<script> 
window.onload = function(){ 
    myId.style.color = 'red'; 
} 
</script> 

</head> 
<body> 

<div id=myId> 
<p>Make this color red.</p> 
</div> 

</body> 
</html> 

2) प्रश्न 2

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

window.onload = function(){ 

var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */ 

myId.style.color = 'red'; 
} 

धन्यवाद!

+0

jsfiddle: http://jsfiddle.net/feeela/2zr5Lgfo/ – feeela

+0

जब किसी वेब पेज में ऐसे कई तत्वों की आवश्यकता होती है तो यह सब कुछ स्टोर करने का अच्छा विचार नहीं हो सकता है। –

उत्तर

10

निम्नलिखित उदाहरण "document.getElementById ('myId')" के बिना काम करता है। वह क्यों है और "document.getElementById ('myId')" को छोड़ना ठीक है?

चूंकि ब्राउज़र ग्लोबल नेम स्पेस में id रों साथ सभी तत्वों के लिए संदर्भ डंप, चर नाम के रूप में id का उपयोग कर। (तकनीकी रूप से, संपत्ति वैश्विक वस्तु पर नाम; वैश्विक वस्तु के गुण वैश्विक चर हैं।) मैं दृढ़ता से पर निर्भर करता हूं और इसके बजाय document.getElementById (या इसी तरह) का उपयोग करता हूं। वैश्विक नामस्थान वास्तव में भीड़ है और वहां कई अन्य चीजें हैं जो संघर्ष कर सकती हैं।

उदाहरण के लिए

, यदि आप

<div id="foo">...</div> 

और

function foo() { 
} 

है तो बस अपने कोड में foo का उपयोग कर आप समारोह, नहीं तत्व दे देंगे।

इसी प्रकार यदि आप

<input type="text" id="name"> 

है ... और अपने कोड में name उपयोग करते हैं, आप विंडो का नाम (एक स्ट्रिंग) प्राप्त होंगे, न कि अपने id="name" क्षेत्र के लिए HTMLInputElement

वैश्विक नामस्थान में तत्वों के डंपिंग संदर्भों का यह व्यवसाय §5.2.4 of the HTML5 spec में शामिल है, जो इस मामले में काफी हद तक दस्तावेज कर रहा है कि ब्राउज़र ने लंबे समय तक क्या किया है।

यदि मैं आईडी को एक चर में संग्रहीत नहीं करता हूं या यह कुछ पहले से ही एक भिन्न है तो क्या यह अधिक डोम ट्रैवर्सल होगा?

यह पहले से ही एक वैश्विक चर है, इसलिए कोई अतिरिक्त डोम ट्रैवर्सल नहीं है। एक गहराई से घिरे हुए समारोह में और अधिक स्कोप चेन ट्रैवर्सल हो सकता है, लेकिन यह एक प्रमुख मुद्दा होने की संभावना नहीं है।


लेकिन फिर से, मैं दृढ़ता से स्वचालित तत्व वैश्विक पर निर्भर की सिफारिश नहीं। इसके बजाए, अपने कोड को स्कोपिंग फ़ंक्शन में लपेटें (जैसा कि आपने दिखाया है), और getElementById, querySelector, querySelectorAll इत्यादि के साथ तत्वों को उचित रूप से प्राप्त करें। यदि आप स्वचालित ग्लोबल्स पर भरोसा करते हैं, तो अंततः आप एक संघर्ष से काट लेंगे। लेकिन यह राय है।

ध्यान दें कि getElementById साथ तत्वों को देख वास्तव में बहुत तेजी से है, इसलिए कैशिंग संदर्भ (आप कोडिंग सुविधा की तरह, अन्य कारणों के लिए ऐसा करने के लिए चाहते हो सकता है) प्रदर्शन के कारणों के लिए आवश्यक आमतौर पर नहीं है। चयनकर्ताओं के साथ चीजों को देखकर (querySelector, querySelectorAll) थोड़ा धीमा है, लेकिन अगर कोई समस्या है तो मैं इसके बारे में चिंता करूंगा। :-)

+0

मेरे पास एक विशेष पैटर्न है कि मैं आईडी और फ़ंक्शंस कैसे लिखता हूं। मेरे मामले में कोई संघर्ष नहीं होगा। इसके अलावा मैं अपने प्रोग्राम को अन्य प्रोग्रामर के साथ कभी साझा नहीं करूंगा। यदि सभी आधुनिक ब्राउज़र तकनीक का समर्थन करते हैं और वे ऐसा करने के लिए सम्मिलित करने की योजना बना रहे हैं, तो मुझे इसका प्रयास करने का कोई कारण नहीं दिखता है। लेकिन, आपके उत्तर के लिए बहुत बहुत धन्यवाद! – user1087110

+0

मैंने कुछ हफ्ते पहले दुर्घटना से तकनीक की खोज की थी और तब से इसका उपयोग कर रहे हैं। यह मोबाइल ब्राउज़र सहित सभी ब्राउज़रों के साथ काम करता है। – BlackMagic

संबंधित मुद्दे