सीएसएस चयनकर्ताओं के साथ डीओएम तत्वों को खोजने का सबसे अच्छा तरीका

Question

लाइब्रेरी का उपयोग किये बिना, सीएसएस चयनकर्ता के साथ डोम तत्वों को ढूंढने का सबसे आसान तरीका क्या है?

function select(selector) { 
return [ /* some magic here please :) */ ] 
}; 

select('body')[0] // body; 

select('.foo') // [div,td,div,a] 

select('a[rel=ajax]') // [a,a,a,a] 

यह प्रश्न पूरी तरह अकादमिक है। मुझे यह जानने में दिलचस्पी है कि यह कैसे लागू किया गया है और 'स्नैग' क्या हैं। इस समारोह का अपेक्षित व्यवहार क्या होगा? (वापसी सरणी, या पहले डोम तत्व, आदि वापस)।

Answer 1

इन दिनों, पुस्तकालय के बिना इस तरह की चीजें करना पागलपन है। हालांकि, मुझे लगता है कि आप यह जानना चाहते हैं कि यह सामान कैसे काम करता है। मैं सुझाव दूंगा कि आप jQuery या अन्य जावास्क्रिप्ट पुस्तकालयों के स्रोत में देखें।

इस बात को ध्यान में रखते हुए, चयनकर्ता फ़ंक्शन में सभी अलग-अलग चयनकर्ताओं को संभालने के लिए केस कथन स्विच करने के लिए बहुत कुछ शामिल करना होगा। उदाहरण:

function select(selector) { 
if(selector.indexOf('.') > 0) //this might be a css class 
    return document.getElementsByClassName(selector); 
else if(selector.indexOf('#') > 0) // this might be an id 
    return document.getElementById(selector); 
else //this might be a tag name 
    return document.getElementsByTagName(selector); 
//this is not taking all the different cases into account, but you get the idea. 
}; 

Answer 2

कोई भी रास्ता नहीं बनाया गया है। अनिवार्य रूप से, यदि आप jQuery के बिना जाने का फैसला करते हैं, तो आप अपने कोड में इसके एक बग्गी संस्करण की प्रतिलिपि बनायेंगे।

Answer 3

चयनकर्ता इंजन बनाना कोई आसान काम नहीं है। मैं क्या पहले से मौजूद है से सीखने का सुझाव देते हैं:

• Sizzle
• Peppy (जेम्स Donaghue द्वारा निर्मित)
• Sly (हेराल्ड Kirschner द्वारा निर्मित)

Answer 4

(Resig, jQuery में प्रयोग किया जाता द्वारा निर्मित)

यहां एक अच्छा स्निपेट है जिसका मैंने कुछ बार उपयोग किया है। यह वास्तव में छोटा और साफ है। यह सभी आम सीएसएस चयनकर्ताओं के लिए समर्थन है।

http://www.openjs.com/scripts/dom/css_selector/

Answer 5

कस्टम हैक्स के अलावा, हाल के ब्राउज़रों में आप) W3C Selectors API Level 1, अर्थात् document.querySelector (में परिभाषित देशी तरीकों और document.querySelectorAll() उपयोग कर सकते हैं:

var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");