querySelectorAll कई स्थितियों के साथ

Question

क्या एकाधिक असंबद्ध स्थितियों का उपयोग करके querySelectorAll द्वारा खोज करना संभव है? यदि हां कैसे? और यह निर्दिष्ट करने के लिए कि क्या वे AND या OR मानदंड हैं?

उदाहरण के लिए:

कैसे एक भी querySelectorAll कॉल के साथ सभी रूप रों, पी और कथा रों खोजने के लिए? मुमकिन?

Answer 1

क्या कई असंबद्ध स्थितियों का उपयोग करके querySelectorAll पर खोज करना संभव है?

हाँ, क्योंकि querySelectorAll पूर्ण CSS चयनकर्ताओं को स्वीकार करता है, और सीएसएस selector groups की अवधारणा, आप एक से अधिक असंबंधित चयनकर्ता निर्दिष्ट कर सकते हैं जो है। उदाहरण के लिए:

var list = document.querySelectorAll("form, p, legend"); 

... किसी भी तत्व है कि एक formयाpयाlegend है युक्त एक सूची प्रदान करेगा।

सीएसएस में अन्य अवधारणा भी है: अधिक मानदंडों के आधार पर प्रतिबंधित करना। आप सिर्फ चयनकर्ता के कई पहलुओं को गठबंधन करते हैं। उदाहरण के लिए:

var list = document.querySelectorAll("div.foo"); 

... कि भी (और) वर्ग foo, अन्य div तत्वों की अनदेखी की है सभी div तत्वों की सूची वापस आ जाएगी।

आप, ज़ाहिर है, उन्हें गठबंधन कर सकते हैं:

var list = document.querySelectorAll("div.foo, p.bar, div legend"); 

... जिसका अर्थ है "किसी भी div तत्व भी foo वर्ग है, किसी भी p तत्व भी bar वर्ग है कि शामिल करें, और किसी भी legend तत्व जो div के अंदर भी है। "

Answer 2

हाँ, querySelectorAll एक group of selectors ले करता है: प्रलेखन के अनुसार

form, p, legend 

Answer 3

, जैसे किसी भी सीएसएस चयनकर्ता के साथ, आप के रूप में आप चाहते हैं के रूप में कई की स्थिति निर्दिष्ट कर सकते हैं, और वे तार्किक रूप में 'या' इलाज कर रहे हैं ।

यह उदाहरण या तो "नोट" के एक वर्ग या "चेतावनी" के साथ दस्तावेज़ के भीतर सभी div तत्वों की सूची देता है:

var matches = document.querySelectorAll("div.note, div.alert"); 

स्रोत: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

इस बीच

को उदाहरण के लिए 'AND' कार्यक्षमता प्राप्त करें, उदाहरण के लिए, बस एक बहुआयामी चयनकर्ता का उपयोग करें, जैसा कि jquery कहता है:

https://api.jquery.com/multiple-attribute-selector/

पूर्व। "input[id][name$='man']" तत्व और आईडी दोनों का नाम निर्दिष्ट करता है और दोनों स्थितियों को पूरा किया जाना चाहिए। कक्षाओं के लिए यह 2 वर्गों की वस्तु की आवश्यकता के लिए ".class1.class2" के रूप में स्पष्ट है।

दोनों के सभी संभावित संयोजन वैध हैं, इसलिए आप आसानी से अधिक परिष्कृत 'OR' और 'AND' अभिव्यक्तियों के बराबर प्राप्त कर सकते हैं।