document.querySelectorAll() ब्राउज़रों में कई विसंगतियां हैं और पुराने ब्राउज़र में समर्थित नहीं है इसका नहीं है । इससे आजकल कोई परेशानी नहीं होगी । इसमें एक बहुत ही अनचाहा स्कूपिंग तंत्र है और कुछ अन्य में इतनी अच्छी विशेषताएं नहीं हैं । जावास्क्रिप्ट के साथ भी आपके पास इन प्रश्नों के परिणाम सेट के साथ काम करने में कठिन समय है, जो कई मामलों में आप करना चाहते हैं। : jQuery की तरह उन पर काम करने के लिए कार्य प्रदान करता filter(), find(), children(), parent(), map(), not()और कई और अधिक। छद्म श्रेणी के चयनकर्ताओं के साथ काम करने की jQuery क्षमता का उल्लेख नहीं करना।
हालाँकि, मैं इन चीजों को jQuery के सबसे मजबूत फीचर्स के रूप में नहीं बल्कि अन्य चीजों जैसे "वर्किंग" पर डोम (घटनाओं, स्टाइलिंग, एनीमेशन और जोड़-तोड़) को क्रॉसबोवर संगत तरीके से या अजाक्स इंटरफ़ेस के रूप में समझूंगा ।
यदि आप केवल jQuery से चयनकर्ता इंजन चाहते हैं, तो आप एक jQuery का उपयोग कर सकते हैं जो स्वयं उपयोग कर रहा है: Sizzle इस तरह से आपके पास jQuery के चयनकर्ता इंजन की क्षमता बिना ओवरहेड के है।
संपादित करें: केवल रिकॉर्ड के लिए, मैं एक विशाल वेनिला जावास्क्रिप्ट प्रशंसक हूं। फिर भी यह एक तथ्य है कि आपको कभी-कभी जावास्क्रिप्ट की 10 लाइनों की आवश्यकता होती है जहां आप 1 लाइन jQuery लिखेंगे।
बेशक आपको इस तरह jQuery नहीं लिखने के लिए अनुशासित होना होगा:
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
यह पढ़ना बहुत कठिन है, जबकि उत्तरार्द्ध बहुत स्पष्ट है:
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
समतुल्य जावास्क्रिप्ट ऊपर pseudocode द्वारा चित्रित अधिक जटिल होगा:
1) तत्व का पता लगाएं, सभी तत्व या केवल पहले लेने पर विचार करें।
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2) कुछ (संभवत: नेस्टेड या पुनरावर्ती) लूप्स के माध्यम से बच्चे के नोड्स की सरणी पर फेरबदल करें और कक्षा की जांच करें (सभी ब्राउज़रों में उपलब्ध नहीं होने वाली क्लासलिस्ट!)
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('foo');
// do some more magic stuff here
}
3) सीएसएस शैली लागू करें
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
यह कोड आपके द्वारा jQuery के साथ लिखे जाने वाले कोड की कम से कम दो बार होगी। इसके अलावा, आपको क्रॉस-ब्राउज़र के मुद्दों पर विचार करना होगा जो मूल कोड के गंभीर गति लाभ (विश्वसनीयता के अलावा) से समझौता करेंगे ।
querySelectorविधियों में काम नहीं करेंगे । (3) AJAX कॉल करना jQuery के साथ बहुत तेज और आसान है। (4) IE6 + में सहायता। मुझे यकीन है कि कई और बिंदु हैं जो भी बनाए जा सकते हैं।