जावास्क्रिप्ट क्वेरीसेंटर बनाम getElementById [बंद]

Question

मैंने सुना है कि querySelectorऔर querySelectorAllचयन करने के लिए नए तरीके हैं DOMतत्वों। वे पुराने तरीकों की तुलना कैसे करते हैं, getElementByIdऔर getElementsByClassNameप्रदर्शन और ब्राउज़र समर्थन के मामले में?

प्रदर्शन jQuery के क्वेरी चयनकर्ता की तुलना करने के लिए कैसे करता है?

क्या देशी सेट का उपयोग करने के लिए एक सर्वोत्तम अभ्यास सिफारिश है?

Comments

बेहतर परिभाषित करें। वे लगभग पूरी तरह से अलग हैं।

यह पूछने की तरह है "क्या एक एकल आकार का स्पैनर एक समायोज्य स्पैनर से बेहतर है?" जवाब है: वे अधिक शक्तिशाली और अधिक लचीला है, और इतने सारे बेहतर अवसरों पर हैं, लेकिन getElementByIdऔर getElementsByClassNameअभी भी प्रयोजनों के लिए उनके नाम का वर्णन के लिए आदर्श हैं।

— lonesomeday

ओह, और qS/qSAकिसी भी तत्व संदर्भ से इस्तेमाल किया जा सकता है, लेकिन gEBIकेवल documentसंदर्भ से ही इस्तेमाल किया जा सकता है।

getElementByIdidडोम नोड्स को खोजने के लिए विशेषताओं से मेल खाता है , जबकि querySelectorचयनकर्ताओं द्वारा खोज की जाती है। अतः एक अमान्य चयनकर्ता के लिए <div id="1"></div>, उदाहरण के लिए , जब तक आप इसे विशेषता से मेल खाने के लिए नहीं कहते हैं, तब तक getElementById('1')काम querySelector('#1')करेगा id(जैसे querySelector('[id="1"]')।

— शमूएल एल्ह

बस एक FYI करें किसी को भी इस पढ़ने के लिए है, लेकिन querySelectorऔर querySelectorAllपूरी तरह से अब समर्थित हैं। caniuse.com/#feat=queryselector

— Telarian

Answer 1

"बेहतर" व्यक्तिपरक है।

querySelector नई सुविधा है।

getElementByIdसे बेहतर समर्थित है querySelector।

querySelectorसे बेहतर समर्थित है getElementsByClassName।

querySelectorआपको ऐसे नियमों के साथ तत्व ढूंढने देता है जिन्हें व्यक्त नहीं किया जा सकता है getElementByIdऔरgetElementsByClassName

आपको किसी भी कार्य के लिए उपयुक्त उपकरण चुनने की आवश्यकता है।

(उपरोक्त में, querySelectorपढ़ने के लिए querySelector/ querySelectorAll)।

Comments

querySelector समर्थन: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - महत्वपूर्ण रूप से महत्वपूर्ण है, ब्राउज़र से ब्राउज़र में भिन्न होने की संभावना है।

— क्वेंटिन

बहुत अच्छा जवाब और यहाँ कुछ बेंचमार्क परीक्षण हैं

— परी.bonev

क्यों बेहतर आदेश का समर्थन: getElementById> querySelector> getElementsByClassName, क्योंकि मैंने सोचा getElementsByClassNameके रूप में समर्थन के समान स्तर होना चाहिए getElementById?

— लेई यांग

यह उत्तर विधियों, विशेष रूप से प्रदर्शन-वार के बीच अंतर पर स्पर्श नहीं करता है।

— ड्रोर बार

Answer 2

कार्यों getElementByIdऔर getElementsByClassName,-अलग होते हैं, जबकि querySelectorऔर querySelectorAllअधिक विस्तृत कर रहे हैं। मेरा अनुमान है कि वे वास्तव में एक खराब प्रदर्शन होगा।

इसके अलावा, आपको उन ब्राउज़र में प्रत्येक फ़ंक्शन के समर्थन के लिए जांच करने की आवश्यकता है जिन्हें आप लक्षित कर रहे हैं। नया यह है, समर्थन की कमी या समारोह "छोटी गाड़ी" होने की उच्च संभावना है।

Comments

@thomas आपका लिंक नीचे है। क्या कहीं काम करने की कड़ी है?

— user5508297

कई संग्रहीत संस्करण हैं: web.archive.org/web/20160108040024/http://jsperf.com/… लेकिन परीक्षण वास्तव में बहुत पुराना (2010) है, इसलिए परिणाम अधिक आधुनिक इंजनों के साथ बहुत भिन्न हो सकता है।

— थोमस

संग्रहीत पृष्ठ वास्तव में गतिशील है और आपको अपने वर्तमान ब्राउज़र पर परीक्षण फिर से चलाने की अनुमति देता है। querySelectorAll अभी भी मेरे ब्राउज़र पर लगभग 37% द्वारा धीमी है। (Chrome 71 - vgy.me/TwGL3o.png ) यह भी ध्यान देने योग्य है कि getElementById एक जीवित परिणाम देता है, जिसका अर्थ है कि यदि आप DOM बदलते हैं, तो परिवर्तन getElementByID द्वारा प्राप्त परिणाम से परिलक्षित होगा (यदि कार्यक्षेत्र में है) जबकि नोडलिस्ट querySelectorAll द्वारा लौटाया गया स्नैपशॉट है, जैसे कि जब कॉल की गई थी उस समय चीजें थीं, परिणाम DOM के बाद के परिवर्तनों को प्रतिबिंबित नहीं करेगा।

— W.Prins

nodelist ... is not liveक्या आप इसके लिए प्रलेखन प्रदान कर सकते हैं? @ W.Prins दोनों विधियाँ Elementप्रकार लौटाती हैं ।

— मैक्सिमिलियन बर्स्ज़ले 19

आह, मुझे लगता है कि मैंने एक टाइपो बनाया है, कृपया मेरी माफी स्वीकार करें! मुझे "getElementsByClassName" लिखना चाहिए था, जहां मैंने "getElementByID" लिखा था, उदाहरण के लिए यह getElementsByClassName (और इसी तरह का) जो एक लाइव परिणाम देता है "। वास्तव में दोनों getElementsByClassName और querySelectorAll एक NodeList देता है, लेकिन पूर्व के मामले में यह लाइव है। यह स्नैपशॉट है।

— W.Prins