2011-06-05 5 views
55

जावास्क्रिप्ट में, मैं कर सकते हैं:क्या 'नई छवि() `और` document.createElement (' img ')' के बीच कोई अंतर है?

img1 = new Image(); 
img2 = document.createElement('img'); 

मेरे सवाल है, वहाँ दो दृष्टिकोण के बीच एक अंतर है? मैंने कहीं पढ़ा है कि Image, Form, और Element को होस्ट ऑब्जेक्ट्स कहा जाता है, क्या यह सच है? यदि यह है, मेजबान वस्तुओं क्या हैं?

कौन सा दृष्टिकोण बेहतर है?

+0

[कहाँ 'नई Image' परिभाषित किया गया है?] (Http://stackoverflow.com/questions/6936071/where-are-constructors-such-as-new-image-and-new-option-documented) –

उत्तर

44

मुझे कोई विस्तृत संदर्भ नहीं मिला लेकिन MDC - HTMLImageElement उदाहरण में टिप्पणी के आधार पर, ऐसा लगता है कि Image DOM स्तर 0 का हिस्सा है जबकि document.createElement is part of DOM level 2

डोम स्तर 0 का आविष्कार नेटस्केप द्वारा किया गया था और वेबसाइट के कुछ तत्वों तक पहुंचने का एक तरीका प्रदान किया गया था। असल में सभी ब्राउज़र पीछे की संगतता के लिए इसका समर्थन करते हैं।
लेकिन ईमानदारी से, मुझे समझ नहीं आता क्यों Image निर्माता वहां मौजूद है, क्योंकि जहाँ तक मैं यह समझ, वहाँ था का कोई उपाय नहीं हेरफेर 0. शायद यह केवल इस्तेमाल किया गया था डोम स्तर के साथ दस्तावेज़ वस्तुओं को बनाने के लिए आंतरिक रूप से ब्राउज़र द्वारा।

डीओएम स्तर 2 डब्ल्यू 3 सी द्वारा विकसित एक आधिकारिक मानक है।

डीओएम स्तरों के बारे में अधिक जानकारी के लिए, quirksmode.org - Level 0 DOM और Wikipedia पर एक नज़र डालें।


मैंने कहीं पढ़ा है कि Image, Form, और Elementमेजबान वस्तुओं कहा जाता है, यह सच है?

हां।

यदि यह है, तो होस्ट ऑब्जेक्ट्स क्या हैं?

ECMAScript specification मेजबान वस्तुओं इस तरह से प्रेरित:

ECMAScript एक मेजबान वातावरण के भीतर संगणना प्रदर्शन और कम्प्यूटेशनल वस्तुओं जोड़ तोड़ के लिए एक वस्तु उन्मुख प्रोग्रामिंग भाषा है। यहां परिभाषित ईसीएमएस्क्रिप्ट का उद्देश्य कम्प्यूटेशनल रूप से आत्मनिर्भर होना नहीं है; वास्तव में, बाहरी डेटा के इनपुट या गणना किए गए परिणामों के आउटपुट के लिए इस विनिर्देश में कोई प्रावधान नहीं है।इसके बजाए, यह अपेक्षा की जाती है कि ईसीएमएस्क्रिप्ट प्रोग्राम का कम्प्यूटेशनल वातावरण न केवल ऑब्जेक्ट्स और अन्य विनिर्देशों में वर्णित अन्य सुविधाएं प्रदान करेगा बल्कि कुछ पर्यावरण-विशिष्ट होस्ट ऑब्जेक्ट्स भी प्रदान करेगा, जिनके विवरण और व्यवहार इस विनिर्देश के दायरे से बाहर हैं, यह इंगित करने के अलावा वे कुछ गुण प्रदान कर सकते हैं जिन्हें एक्सेस किया जा सकता है और कुछ कार्य जिन्हें ईसीएमएस्क्रिप्ट प्रोग्राम से बुलाया जा सकता है।

और

मेजबान वस्तु
वस्तु मेजबान वातावरण द्वारा आपूर्ति ECMAScript के निष्पादन के वातावरण को पूरा करने के।
नोट कोई भी वस्तु जो मूल नहीं है वह होस्ट ऑब्जेक्ट है।

तो किसी भी वस्तु है कि विनिर्देश में परिभाषित और पर्यावरण द्वारा प्रदान नहीं की है एक मेजबान वस्तु है। ये उदाहरण के लिए ब्राउज़र (दूसरों के बीच) में हैं: window, document और console

+0

अच्छा जवाब! मैं पूछना चाहता था, 'दस्तावेज़' क्यों माना जाता है * होस्ट ऑब्जेक्ट *? क्या यह डीओएम स्तर 1 spec में परिभाषित नहीं है? http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i- दस्तावेज़ – rickchristie

+7

@rickchristie: ईसीएमएस्क्रिप्ट विनिर्देश के साथ डीओएम विनिर्देश को भ्रमित न करें। दस्तावेज़ द्वारा 'दस्तावेज़' प्रदान किया जाता है ताकि ब्राउज़र को DOM तक पहुंचने के लिए जावास्क्रिप्ट के लिए एक इंटरफ़ेस के रूप में प्रदान किया जा सके। यह ईसीएमएस्क्रिप्ट विनिर्देश (जावास्क्रिप्ट स्वयं ही) का हिस्सा नहीं है। –

+0

इसे मिला। धन्यवाद! – rickchristie

7

दो पंक्तियां बराबर हैं और दोनों HTMLImageElement ऑब्जेक्ट बनाते हैं। एक्सएमएल दस्तावेज़ में मिश्रित नामस्थानों के साथ एकमात्र अंतर है - new Image() हमेशा एक्सएचटीएमएल नेमस्पेस के साथ <img> तत्व लौटाता है, document.createElement('img') हमेशा ऐसा नहीं करता है।

+2

धन्यवाद! क्या आप अधिक विस्तार से बता सकते हैं कि 'document.createElement (' img ') हमेशा ऐसा नहीं करता है (क्या यह दस्तावेज़ के कार्यप्रणाली के आधार पर है)? –

+5

नामस्थान के बारे में: यही है कि 'document.createElementNS' के लिए है: https://developer.mozilla.org/en/DOM/document.createElementNS –

4

मैं व्यक्तिगत रूप से createElement के साथ चिपक जाता हूं क्योंकि तब यह छवि बनाने के लिए एक विशेष मामला नहीं है जैसा कि वे समान हैं, मैंने यह भी देखा कि jquery सब कुछ के लिए appendChild (नोड) विधि का उपयोग करें और मुझे यकीन नहीं है आपके प्रश्नों में दो और तरीकों के बीच अंतर का है लेकिन jquery काम करता है क्रॉस ब्राउज़र

1

मुझे नहीं पता कि तकनीकी अंतर क्या होना चाहिए, लेकिन मैंने निम्नलिखित कोड में new Image() से document.createElement('img') से बदलकर आईई 8 बग में तय किया है। आईई 8 में, Image कन्स्ट्रक्टर का उपयोग करते समय ऑनलोड कॉलबैक कभी नहीं निकाल दिया गया।

newImage = document.createElement('img'); 
//newImage = new Image(); 

newImage.onload = function() { 
    callback(this.width, this.height); 
}; 

newImage.src = image.src; 
संबंधित मुद्दे