querySelectorAll ที่มีหลายเงื่อนไข

Question 1

เป็นไปได้ไหมที่จะทำการค้นหาโดยใช้ querySelectorAll โดยใช้เงื่อนไขที่ไม่เกี่ยวข้องหลาย ๆ ถ้าใช่อย่างไร และจะระบุได้อย่างไรว่าสิ่งเหล่านั้นเป็นเกณฑ์ AND หรือ OR?

ตัวอย่างเช่น:

วิธีค้นหาแบบฟอร์ม s, p s และตำนาน s ทั้งหมดด้วยแบบสอบถามเดียวตัวเลือกการโทรทั้งหมด? เป็นไปได้ไหม

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องค์ประกอบใด ๆที่อยู่ใน a divด้วย"

Question 3

ตามเอกสารประกอบเช่นเดียวกับตัวเลือก css คุณสามารถระบุเงื่อนไขได้มากเท่าที่คุณต้องการและถือว่าเป็นตรรกะ 'OR'

ตัวอย่างนี้แสดงรายการขององค์ประกอบ div ทั้งหมดภายในเอกสารโดยมีคลาสเป็น "note" หรือ "alert":

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

ที่มา: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

ในขณะเดียวกันเพื่อรับฟังก์ชั่น 'AND' คุณสามารถใช้ตัวเลือก multiattribute ดังที่ jquery กล่าวว่า:

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

เช่น "input[id][name$='man']" ระบุทั้ง id และชื่อขององค์ประกอบและต้องตรงตามเงื่อนไขทั้งสอง สำหรับคลาสนั้นชัดเจนพอ ๆ กับ " .class1.class2" ที่ต้องการอ็อบเจกต์ 2 คลาส

ชุดค่าผสมที่เป็นไปได้ทั้งหมดของทั้งสองอย่างนั้นใช้ได้ดังนั้นคุณจึงสามารถเทียบเท่ากับนิพจน์ 'OR' และ 'AND' ที่ซับซ้อนกว่าได้อย่างง่ายดาย

Question 4

ใช่querySelectorAllใช้กลุ่มตัวเลือก :

form, p, legend

Question 5

ด้วย JavaScript บริสุทธิ์คุณสามารถทำได้ (เช่น SQL) และทุกสิ่งที่คุณต้องการโดยพื้นฐาน:

<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>

ขยายข้อมูลโค้ด