2011-10-19 12 views
22

संभव डुप्लिकेट:
IE/Chrome: are DOM tree elements global variables here?
why window[id] === document.getElementById(id)सीधे संदर्भ HTML तत्वों

मैं सिर्फ HTML/जावास्क्रिप्ट में कुछ जो मुझे थोड़ा हैरान कर दिया गया है का सामना करना पड़ा। जावास्क्रिप्ट का उपयोग करते हुए, HTML तत्व का संदर्भ प्राप्त करते समय, मैंने हमेशा पहले jQuery या document.getElementById का उपयोग किया है। यह भी प्रतीत होता है कि आप सीधे आईडी के उपयोग से तत्व का उपयोग कर सकते हैं। क्या कोई इस बात की व्याख्या कर सकता है? मैंने गुमराह किया है लेकिन इस क्षमता का कोई संदर्भ नहीं मिल रहा है, हर साइट getElementById के बारे में बात करती है।

निम्नलिखित पृष्ठ स्निपेट इसे दिखाता है।

<html> 
<head> 
</head> 
<body> 
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" /> 
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" /> 
    <div id="blah"></div> 
</body> 

अग्रिम में बहुत धन्यवाद।

+0

+1 पहले इस पर नहीं आया है लेकिन निश्चित रूप से काम करता है: http: // jsfiddle।नेट/qdrAr/ – Clive

+0

आपने किस ब्राउजर में यह सत्यापित किया है? आमतौर पर उपयोग नहीं किया जा सका क्योंकि यह सभी ब्राउज़रों में काम नहीं कर सकता है। –

+0

यह क्रॉस ब्राउज़र नहीं है। हो सकता है कि कुछ ब्राउज़रों ने इसका समर्थन करना शुरू कर दिया हो, लेकिन सभी पुराने संस्करणों को वैसे भी नहीं। – Nikoloff

उत्तर

14

उनके [id] के आधार पर पृष्ठ पर तत्वों का चयन करने में सक्षम होने के कारण प्रारंभिक जावास्क्रिप्ट (डीओएम एलवीएल 0 या 1 मेथिंक, स्रोत ढूंढने के लिए प्रतीत नहीं होता है) से "फीचर" है।

दुर्भाग्यवश यह एक स्वभावपूर्ण विशेषता है। यदि आप के लिए किया था, तो क्या होगा:

<div id="window"></div> 

या

<div id="document"></div> 

अभी तक बेहतर, यहाँ क्या होता है?

<div id="foo"></div> 
<div id="bar"></div> 
<script>var foo = document.getElementById('bar');</script> 

तो उस पर आधारित एक तत्व बुला लिए बारीकियों [id] है बस इस:

यह प्रयोग न करें।

यह संगत नहीं है, और भविष्य में समर्थन प्राप्त करने की गारंटी नहीं है।

व्यक्तिगत तौर पर मैं इस "सुविधा" को देखने के document.all का रास्ता तय करना चाहते हैं। यह केवल हल होने की तुलना में अधिक मुद्दों का कारण बनता है, और document.getElementById, जबकि निश्चित रूप से verbose, सार्थक और समझ में आता है।

+0

मैं निश्चित रूप से *** "इसका उपयोग न करें" *** से सहमत हूं, लेकिन दुर्भाग्य से यह [HTML5 कामकाजी ड्राफ्ट] (http://www.w3.org/TR/html5/browsers) में अपना रास्ता खराब कर चुका है। एचटीएमएल #) का उपयोग-ऑन-खिड़की-वस्तु नाम दिया है। इसके बारे में एक [चल रही चर्चा] (http://www.w3.org/Bugs/Public/show_bug.cgi?id=11960) है, अनुमानतः, माइक्रोसॉफ्ट मानकीकरण के लिए दबाव डाल रहा है और मोज़िला "फीचर को सीमित करने के लिए दबाव डाल रहा है "केवल quirks करने के लिए। जो मैं देख सकता हूं, माइक्रोसॉफ्ट का दावा है कि आईई के व्यवहार को बदलने से कई साइटों को तोड़ दिया जाएगा। –

+1

@AndyE, * कुछ भी * बदलना * कई साइटों को तोड़ देगा। ऐसा इसलिए है क्योंकि टूटी हुई काम करने वाली साइटों की श्रृंखला निरंतर नहीं है, अलग नहीं है। * कई * साइटें हैं जो पहले ही टूटी हुई हैं। – zzzzBov

2

getElementById का उपयोग करना अधिक लचीला और पठनीय है। उदाहरण के लिए, इस काम करेंगे नहीं:

<input type="button" value="direct" onclick="document.innerText = 'direct';" /> 
<div id="document"></div> 
स्पष्ट कारणों के लिए

, लेकिन इस इच्छा:

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" /> 
<div id="document"></div> 

और यह अन्य डेवलपर्स क्या वास्तव में हो रहा है के लिए और अधिक स्पष्ट है।

0

मैं इसे एक दस्तावेज सुविधा है नहीं लगता है, और यह फ़ायरफ़ॉक्स (6) में काम करने के लिए प्रकट नहीं होता है, लेकिन यह Chrome का नवीनतम संस्करण है, साथ ही आईई 6-9 में काम करने के लिए प्रकट होता है।

मैं इस पर भरोसा नहीं करता, और केवल ब्राउज़र सुविधाओं की विषमताओं में से एक पर विचार करता हूं।

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