document.getElementById बनाम jQuery $ ()

Question

क्या इस:

var contents = document.getElementById('contents');

इस के रूप में ही:

var contents = $('#contents');

यह देखते हुए कि jQuery लोड है?

Comments

उत्तरों में उठाए गए बिंदुओं के अलावा, jQuery संस्करण ऐप है। 100x धीमी।

क्या यह कहीं सिद्ध है?

— फ्रैंब्रन

@torazaburo वास्तव में, jQuery का संस्करण 3 गुना धीमा (कम से कम नवीनतम क्रोम पर) भी नहीं है। देखें: jsperf.com/getelementbyid-vs-jquery-id/44

— मिशाल पेरोलकोव्स्की

@ उस लिंक लिंक में michałPerłakowski 10 गुना धीमी है। 26mil बनाम 2.4mil

— क्लाउडीयू क्रेन्गा

JSPerf के लिए सही अपडेट किया गया लिंक है: jsperf.com/getelementbyid-vs-jquery-id मेरे मामले में (FF 58) यह 1000 गुना धीमा है। वैसे भी, jQuery अभी भी प्रति सेकंड 2.5 मिलियन ops करता है। सामान्य तौर पर यह कोई समस्या नहीं है, और यह निश्चित रूप से कार्यक्षमता के मामले में तुलना नहीं की जा सकती है।

— J:२४ पर डिएगो जैन्सिक

Answer 1

बिल्कुल नहीं!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

---

JQuery में, उसी परिणाम को प्राप्त करने के लिए document.getElementById, आप jQuery ऑब्जेक्ट तक पहुंच सकते हैं और ऑब्जेक्ट में पहला तत्व प्राप्त कर सकते हैं (याद रखें कि जावास्क्रिप्ट ऑब्जेक्ट्स साहचर्य सरणियों के समान कार्य करते हैं)।

var contents = $('#contents')[0]; //returns a HTML DOM Object

Comments

रुचि रखने वाले किसी व्यक्ति के लिए document.getElementBy<IE8 सही ढंग से काम नहीं करता है। यह तत्व भी प्राप्त करता है nameइसलिए आप सैद्धांतिक रूप से तर्क दे सकते हैं document.getElementByIdकि यह केवल भ्रामक नहीं है, बल्कि गलत मूल्यों को वापस कर सकता है। मुझे लगता है कि @ जॉन ने इसे नया बनाया, लेकिन मुझे लगा कि इसे जोड़ने में कोई दुख नहीं होगा।

— लाइम

अगर आपका पहचानकर्ता तय नहीं है तो ध्यान रखें। $('#'+id)[0]बराबर नहीं है document.getElementById(id)क्योंकि idइसमें ऐसे अक्षर हो सकते हैं जिन्हें jQuery में विशेष माना जाता है!

— जैकब

यह बहुत मददगार था - यह कभी नहीं पता था! मुझे यकीन है कि मैंने वास्तव में इसे पहले इस्तेमाल किया है, हालांकि, जो मुझे चकित करता है। अरे, आप हर दिन कुछ सीखते हैं! धन्यवाद!

— jedd.ahyoung

google jquery equivalent of document.getelementbyidऔर पहला परिणाम यह पोस्ट है। धन्यवाद!!!

— अजाब्लाकगोएट

$('#contents')[0].idआईडी नाम देता है।

— उमर

Answer 2

नहीं।

कॉल करने document.getElementById('id')पर एक कच्चा DOM ऑब्जेक्ट वापस आएगा।

कॉलिंग $('#id')एक jQuery ऑब्जेक्ट लौटाएगा जो DOM ऑब्जेक्ट को लपेटता है और jQuery के तरीके प्रदान करता है।

इस प्रकार, आप केवल कॉल पर css()या जैसे jQuery विधियों को कॉल कर सकते हैं।animate()$()

आप यह भी लिख सकते हैं $(document.getElementById('id')), जो एक jQuery ऑब्जेक्ट लौटाएगा और इसके बराबर है $('#id')।

आप लिखकर एक jQuery ऑब्जेक्ट से अंतर्निहित DOM ऑब्जेक्ट प्राप्त कर सकते हैं $('#id')[0]।

Comments

क्या आपको पता है कि कौन सा तेज़ है - $ (document.getElementById ('एलिमेंट')) बनाम $ ('# एलिमेंट')?

— इवान इवकोविक

@ IvanIvković: पहला सबसे तेज़ है, क्योंकि इसमें स्ट्रिंग पार्सिंग शामिल नहीं है।

— SLaks

@SLaks कच्चे डोम ऑब्जेक्ट और jQuery ऑब्जेक्ट के बीच मुख्य अंतर क्या है? बस उस jQuery ऑब्जेक्ट का उपयोग करके हम jQuery के तरीकों को लागू करने की क्षमता रखते हैं?

— रॉक्सी’प्रो

@ Roxy'Pro: वे अलग-अलग ऑब्जेक्ट हैं। jQuery ऑब्जेक्ट डोम ऑब्जेक्ट्स को लपेटते हैं। दस्तावेज देखें।

— SLaks

यह डॉक्टर जावास्क्रिप्ट डोम ऑब्जेक्ट्स बनाम jQuery ऑब्जेक्ट्स उपयोगी लगता है। In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.

— user3454439

Answer 3

बंद करें, लेकिन समान नहीं। वे एक ही तत्व प्राप्त कर रहे हैं, लेकिन jQuery संस्करण को jQuery ऑब्जेक्ट में लपेटा गया है।

समतुल्य यह होगा

var contents = $('#contents').get(0);

या यह

var contents = $('#contents')[0];

ये तत्व को jQuery ऑब्जेक्ट से बाहर खींच लेंगे।

Answer 4

गति में अंतर पर एक नोट। निम्नलिखित स्निपेट को ऑनक्लिक कॉल में संलग्न करें:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

वैकल्पिक टिप्पणी एक बाहर और फिर दूसरे टिप्पणी। मेरे परीक्षणों में,

document.getElementById के बारे में औसतन 35ms (से अस्थिर 25msअप करने के लिए 52msके बारे में पर 15 runs)

दूसरी ओर, ए

jQuery के बारे में औसतन 200 मि.से (से लेकर 181msके 222msबारे में पर 15 runs)।

इस साधारण परीक्षण से आप देख सकते हैं कि jQuery ने लगभग 6 गुना लंबा समय लिया ।

बेशक, यह 10000एक सरल स्थिति में पुनरावृत्तियों से अधिक है, मैं शायद उपयोग की आसानी के लिए jQuery का उपयोग करेगा और अन्य शांत चीजों की तरह .animateऔर .fadeTo। लेकिन हां, तकनीकी रूप getElementByIdसे काफी तेज है ।

Comments

इस उत्तर के लिए धन्यवाद। मैं पूछना चाहता था, क्या मुझे सभी के $('#someID') साथ प्रतिस्थापित करना चाहिए document.getElementById("someID") ? मैं उस चीज पर काम कर रहा हूं जिसमें मैंने बड़े पैमाने पर उपयोग किया है $('#someID')और मेरा पेज बड़ी फ़ाइल इनपुट के लिए धीमा चलता है। कृपया मुझे सुझाव दें कि मेरी चाल क्या होनी चाहिए।

— मजहर मीक

यदि आप एक ही स्कोप को एक ही स्कोप में कई बार पुनः उपयोग कर रहे हैं, तो इसे सेव करें, जैसे सेव किए var $myId = $('#myId');गए वैरिएबल का पुनः उपयोग करें $myId। आईडी द्वारा ढूंढना आम तौर पर एक बहुत तेज़ बात है, हालांकि यदि पेज सुस्त है तो शायद एक अलग कारण है।

— नर्सरी गुय

धन्यवाद @nurdyguy यह मददगार था। मैं उस पर अमल करने की कोशिश करूंगा।

— मज़हर मीक

Answer 5

नहीं, पहला हमेशा एक DOM एलिमेंट या नल देता है, जबकि दूसरा हमेशा एक jQuery ऑब्जेक्ट देता है। JQuery ऑब्जेक्ट खाली हो जाएगा यदि आईडी के साथ कोई तत्व contentsमेल नहीं खाता था।

आपके द्वारा लौटाया गया DOM तत्व document.getElementById('contents')आपको चीजें बदलने .innerHTML(या .value) आदि की अनुमति देता है , हालांकि आपको jQuery ऑब्जेक्ट पर jQuery के तरीकों का उपयोग करने की आवश्यकता होगी ।

var contents = $('#contents').get(0);

अधिक संतुलित है, हालांकि अगर आईडी के साथ कोई तत्व contentsमेल नहीं खाता है, document.getElementById('contents')तो अशक्त $('#contents').get(0)हो जाएगा , लेकिन अपरिभाषित वापस आ जाएगा।

JQuery ऑब्जेक्ट का उपयोग करने पर एक लाभ यह है कि यदि कोई तत्व हमेशा वापस नहीं किया जाता है तो आपको कोई त्रुटि नहीं मिलेगी। यदि आप nullलौटे द्वारा संचालन करने की कोशिश करते हैं तो आपको त्रुटियां मिलेंगीdocument.getElementById

Answer 6

नहीं, वास्तव में एक ही परिणाम होगा:

$('#contents')[0] 

jQuery को यह नहीं पता है कि क्वेरी से कितने परिणाम वापस आएंगे। आपको जो वापस मिलता है वह एक विशेष jQuery ऑब्जेक्ट है जो क्वेरी से मेल खाने वाले सभी नियंत्रणों का एक संग्रह है।

JQuery को इतना सुविधाजनक बनाने का एक हिस्सा यह है कि MOST तरीकों को इस ऑब्जेक्ट पर बुलाया जाता है जो देखने में ऐसा लगता है कि वे एक नियंत्रण के लिए हैं, वास्तव में एक लूप में हैं जो सभी सदस्यों को बुलाता है int वह संग्रह

जब आप [0] सिंटैक्स का उपयोग करते हैं तो आप आंतरिक संग्रह से पहला तत्व लेते हैं। इस बिंदु पर आपको एक DOM ऑब्जेक्ट मिलता है

Answer 7

मामले में कोई और इसे हिट करता है ... यहाँ एक और अंतर है:

यदि आईडी में ऐसे अक्षर हैं जो HTML मानक द्वारा समर्थित नहीं हैं (तो SO प्रश्न यहां देखें ) तो jQuery इसे नहीं पा सकता है भले ही getElementById करता है।

मेरे साथ क्रोम का उपयोग करके "/" वर्ण (उदा: id = "a / b / c") वाली आईडी के साथ ऐसा हुआ:

var contents = document.getElementById('a/b/c');

मेरा तत्व खोजने में सक्षम था लेकिन:

var contents = $('#a/b/c');

नहीं किया।

Btw, साधारण फिक्स को उस आईडी को नाम फ़ील्ड में ले जाना था। JQuery को तत्व का उपयोग करने में कोई परेशानी नहीं हुई:

var contents = $('.myclass[name='a/b/c']);

Answer 8

जैसे ज्यादातर लोगों ने कहा है, मुख्य अंतर तथ्य यह है कि यह सीधे जावास्क्रिप्ट का उपयोग करके कच्चे डोम ऑब्जेक्ट बनाम jQuery कॉल के साथ एक jQuery वस्तु में लिपटा है। JQuery ऑब्जेक्ट इसके साथ अन्य jQuery फ़ंक्शंस करने में सक्षम होगा, लेकिन, अगर आपको बस साधारण स्टाइल या बेसिक इवेंट हैंडलिंग जैसे साधारण DOM मैनिपुलेशन करने की आवश्यकता है, तो सीधा जावास्क्रिप्ट विधि हमेशा jQuery की तुलना में अधिक तेज़ होती है क्योंकि आप डॉन ' t को जावास्क्रिप्ट पर निर्मित कोड की बाहरी लाइब्रेरी में लोड करना होगा। यह एक अतिरिक्त कदम बचाता है।

Answer 9

var contents = document.getElementById('contents');

var contents = $('#contents');

कोड स्निपेट समान नहीं हैं। पहले एक Elementवस्तु ( स्रोत ) लौटाता है । दूसरा एक, jQuery समतुल्य एक jQuery वस्तु लौटाएगा जिसमें शून्य या एक DOM तत्व का संग्रह होगा। ( jQuery प्रलेखन )। आंतरिक रूप से jQuery document.getElementById()दक्षता के लिए उपयोग करता है।

दोनों मामलों में यदि एक से अधिक तत्व पाए जाते हैं तो केवल पहला तत्व वापस लौटाया जाएगा।

---

जाँच जब jQuery मैं के लिए GitHub परियोजना लाइन के टुकड़े जो document.getElementById कोड का उपयोग किया जा रहा है निम्नलिखित पाया ( https://github.com/jquery/jquery/blob/master/src/core/init.js लाइन 68 के बाद)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

Answer 10

एक अन्य अंतर: getElementByIdरिटर्न पहला मैच है, जबकि $('#...')रिटर्न मैचों की एक संग्रह - हाँ, एक ही आईडी एक HTML दस्तावेज़ में दोहराया जा सकता है।

इसके अलावा, getElementIdदस्तावेज़ से बुलाया जाता है, जबकि $('#...')एक चयनकर्ता से बुलाया जा सकता है। तो, नीचे दिए गए कोड में, document.getElementById('content')पूरे शरीर $('form #content')[0]को वापस कर देगा लेकिन फॉर्म के अंदर वापस आ जाएगा।

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

डुप्लिकेट आईडी का उपयोग करना अजीब लग सकता है, लेकिन यदि आप Wordpress जैसी किसी चीज़ का उपयोग कर रहे हैं, तो एक टेम्पलेट या प्लगइन उसी आईडी का उपयोग कर सकते हैं जैसा कि आप सामग्री में उपयोग करते हैं। JQuery की चयनात्मकता वहाँ आपकी मदद कर सकती है।

Answer 11

jQuery जावास्क्रिप्ट पर बनाया गया है। इसका मतलब है कि यह वैसे भी सिर्फ जावास्क्रिप्ट है।

document.getElementById ()

Document.getElementById () विधि उस तत्व को लौटाती है जिसमें निर्दिष्ट मान के साथ आईडी विशेषता होती है और यदि निर्दिष्ट आईडी वाला कोई तत्व मौजूद नहीं है, तो कोई आईडी मौजूद नहीं है।

जेकरी $ ()

आईडी सिलेक्टर के साथ jQuery () या $ () कॉलिंग के रूप में इसका तर्क एक jQuery ऑब्जेक्ट को या तो शून्य या एक DOM एलिमेंट के संग्रह से लौटाएगा। प्रत्येक आईडी वैल्यू का उपयोग केवल एक दस्तावेज के भीतर ही किया जाना चाहिए। यदि एक से अधिक तत्वों को एक ही आईडी दी गई है, तो उस आईडी का उपयोग करने वाले क्वेरीज़ केवल DOM में पहले मिलान वाले तत्व का चयन करेंगे।

Answer 12

मैंने वेब ब्राउजर में DOM ट्री स्टोर करने के लिए एक noSQL डेटाबेस विकसित किया है जहाँ पेज पर मौजूद सभी DOM एलिमेंट्स के संदर्भ एक छोटे इंडेक्स में स्टोर किए जाते हैं। इस प्रकार फ़ंक्शन "getElementById ()" को एक तत्व प्राप्त करने / संशोधित करने की आवश्यकता नहीं है। जब DOM ट्री में तत्वों को पृष्ठ पर तत्काल किया जाता है, तो डेटाबेस प्रत्येक तत्व को सरोगेट प्राथमिक कुंजी प्रदान करता है। यह एक नि: शुल्क उपकरण है http://js2dx.com

Answer 13

उपरोक्त सभी उत्तर सही हैं। यदि आप इसे क्रिया में देखना चाहते हैं, तो भूलकर भी उस ब्राउज़र में कंसोल न रखें जहाँ आप वास्तविक परिणाम क्रिस्टल स्पष्ट देख सकते हैं:

मेरे पास एक HTML है:

<div id="contents"></div>

(cntrl+shift+c)अपने परिणाम को स्पष्ट रूप से देखने के लिए कंसोल पर जाएं और इन कमांड का उपयोग करें

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

जैसा कि हम देख सकते हैं, पहले मामले में हमें टैग अपने आप मिला (वह है, सख्ती से बोलना, एक HTMLDivElement वस्तु)। उत्तरार्द्ध में हमारे पास वास्तव में एक सादा वस्तु नहीं है, लेकिन वस्तुओं की एक सरणी है। और जैसा कि ऊपर दिए गए अन्य उत्तरों से बताया गया है, आप निम्न कमांड का उपयोग कर सकते हैं:

$('#contents')[0]
>>> div#contents

Answer 14

सभी उत्तर आज पुराने हैं 2019 के रूप में आप सीधे जावास्क्रिप्ट में आईडी कुंजीयुक्त फ़िले का उपयोग कर सकते हैं बस इसे आज़माएं

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

ऑनलाइन डेमो! - https://codepen.io/frank-dspeed/pen/mdywbre