कई शर्तों के साथ querySelectorAll

Question 1

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

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

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

Question 2

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

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

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

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

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

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

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

आप निश्चित रूप से, उन्हें जोड़ सकते हैं:

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

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

Question 3

प्रलेखन के अनुसार, किसी भी सीएसएस चयनकर्ता के साथ की तरह, आप जितनी चाहें उतनी शर्तें निर्दिष्ट कर सकते हैं, और उन्हें तार्किक या 'के रूप में माना जाता है।

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

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

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

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

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

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

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

Question 4

हाँ, चयनकर्ताओं का querySelectorAll एक समूह लेता है :

form, p, legend

Question 5

शुद्ध जावास्क्रिप्ट के साथ आप ऐसा कर सकते हैं (जैसे एसक्यूएल) और कुछ भी जिसकी आपको आवश्यकता है, मूल रूप से:

<html>

<body>

<input type='button' value='F3' class="c2" id="btn_1">
<input type='button' value='F3' class="c3" id="btn_2">
<input type='button' value='F1' class="c2" id="btn_3">

<input type='submit' value='F2' class="c1" id="btn_4">
<input type='submit' value='F1' class="c3" id="btn_5">
<input type='submit' value='F2' class="c1" id="btn_6">

<br/>
<br/>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() 
    {
        var arrFiltered = document.querySelectorAll('input[value=F2][type=submit][class=c1]');

            arrFiltered.forEach(function (el)
            {                
                var node = document.createElement("p");
                
                node.innerHTML = el.getAttribute('id');

                window.document.body.appendChild(node);
            });
        }
    </script>

</body>

</html>

स्निपेट का विस्तार करें