मैं जावास्क्रिप्ट में सीएसएस चयनकर्ताओं का परीक्षण कैसे करूं?

Question

मैं यह देखने के लिए सीएसएस 1-3 चयनकर्ताओं का परीक्षण कैसे कर सकता हूं कि उन्हें सही तत्व मिलते हैं, उदा। जावास्क्रिप्ट (शायद jQuery) के साथ?

Answer 1

अब तक का सबसे सरल पारंपरिक तरीका जावास्क्रिप्ट का उपयोग नहीं करना है, और बस एक टेस्ट पेज सेट करें जहां आप चयनकर्ताओं को अपने दिल की सामग्री में जांच सकते हैं। वेब पर आपके द्वारा देखे जाने वाले परीक्षण मामले (जैसे CSS3.info Selectors Test) वास्तव में ऑनलाइन होस्ट किए गए बस सूप-अप संस्करण हैं।

लेकिन यदि आप जावास्क्रिप्ट विधि की तलाश में हैं, तो आप Selectors API को आजमा सकते हैं। यह आधुनिक डोम कार्यान्वयन (आईई 8 + और अन्य) में उपलब्ध है और यह सीएसएस चयनकर्ताओं का उपयोग करके तत्व नोड्स के लिए डीओएम से पूछताछ के लिए एक जावास्क्रिप्ट फ्रंटएंड प्रदान करता है, साथ ही किसी दिए गए ब्राउज़र द्वारा समर्थित सीएसएस चयनकर्ताओं का परीक्षण करता है।

(उन ब्राउज़रों के लिए जो चयनकर्ता एपीआई को लागू नहीं करते हैं, आपको jQuery पर भरोसा करना होगा, लेकिन याद रखें कि यह चयनकर्ताओं के एक अलग सेट के लिए समर्थन प्रदान करता है जो ब्राउज़र का समर्थन करता है और साथ ही साथ अपने स्वयं के गैर- मानक एक्सटेंशन जो Selectors spec। एक क्रोम का JavaScript कंसोल एक चयनकर्ता का परीक्षण करने के साथ jQuery का उपयोग करने के उदाहरण में नहीं पाए जाते here पाया जा सकता है।)

कॉल querySelector() या querySelectorAll() क्या आप परीक्षण करना चाहते हैं पर निर्भर करता है, और जाँच वापसी मूल्य (अधिमानतः अपने ब्राउज़र के डेवलपर टूल में जब से आप केवल परीक्षण कर रहे हैं):

• यदि मैचों पाए जाते हैं, तो पूर्व विधि पहले Element मिलान करती है जबकि उत्तरार्द्ध NodeList के रूप में मेल खाने वाले सभी तत्व लौटाता है।

• यदि कुछ भी नहीं मिला है, तो पूर्व null रिटर्न देता है जबकि बाद में NodeList खाली होता है।

• यदि चयनकर्ता अमान्य है, तो एक अपवाद फेंक दिया जाएगा जिसे आप पकड़ सकते हैं।

  • पहले h1body में ढूँढना:

    var h1 = document.body.querySelector('h1'); 
    console.log(h1); 
    

    <h1 itemprop="name"> 
    

  यहाँ फ़ायरफ़ॉक्स 10 पर आदेश संपादक (बहु) Firebug के कंसोल में साथ कुछ उदाहरण, this very question पर परीक्षण कर रहे हैं

• उसके वंशजों की पूछताछतत्व हम सिर्फ पाया:

  var subnodes = h1.querySelectorAll('*'); 
  console.log(subnodes[0]); 
  

  <a class="question-hyperlink" href="https://stackoverflow.com/questions/9165859/how-do-i-test-css-selectors-in-javascript"> 
  

• परीक्षण फ़ायरफ़ॉक्स में :-moz-any() छद्म वर्ग (:-webkit-any() सफारी/क्रोम में):

  // This selector works identically to h1 > a, li > a 
  var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a'); 
  console.log(hyperlinks); 
  

  [a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript] 
  

• परीक्षण में गैर-मौजूद चयनकर्ता (कि perhaps many of us wish did exist):

  // :first-of-class doesn't exist! 
  var selector = 'div.answer:first-of-class'; 
  
  try { 
      var firstAnswer = document.querySelector(selector); 
      console.log(firstAnswer); 
  } catch (e) { 
      console.log('Invalid selector: ' + selector); 
  } 
  

  Invalid selector: div.answer:first-of-class 
  

Answer 2

http://selectorgadget.com काफी का परीक्षण करने और CSS चयनकर्ताओं का निर्माण करने के लिए अच्छा है। जावास्क्रिप्ट का एक टुकड़ा खींचें और छोड़ें जो वे आपके बुकमार्क बार में प्रदान करते हैं और जब चाहें इसे क्लिक करें।