querySelectorAll với nhiều điều kiện

Question 1

Có thể thực hiện tìm kiếm bằng querySelectorAll sử dụng nhiều điều kiện không liên quan không? Nếu có làm thế nào? Và làm thế nào để xác định đó là các tiêu chí VÀ hoặc HOẶC?

Ví dụ:

Làm thế nào để tìm thấy tất cả các hình thức s, p s và huyền thoại s với một đơn querySelectorAll cuộc gọi? Khả thi?

Question 2

Có thể thực hiện tìm kiếm bằng querySelectorAllcách sử dụng nhiều điều kiện không liên quan không?

Có, vì querySelectorAllchấp nhận các bộ chọn CSS đầy đủ và CSS có khái niệm nhóm bộ chọn , cho phép bạn chỉ định nhiều bộ chọn không liên quan. Ví dụ:

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

... sẽ trả về một danh sách chứa bất kỳ phần tử nào là form hoặc p hoặc legend .

CSS còn có một khái niệm khác: Hạn chế dựa trên nhiều tiêu chí hơn. Bạn chỉ cần kết hợp nhiều khía cạnh của một bộ chọn. Ví dụ:

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

... sẽ trả về danh sách tất cả các divphần tử cũng ( và ) có lớp foo, bỏ qua các divphần tử khác .

Tất nhiên, bạn có thể kết hợp chúng:

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

... có nghĩa là "Bao gồm bất kỳ divphần tử nào cũng có foolớp, bất kỳ pphần tử nào cũng có barlớp và bất kỳ legendphần tử nào cũng bên trong a div."

Question 3

Theo tài liệu, giống như với bất kỳ công cụ chọn css nào, bạn có thể chỉ định bao nhiêu điều kiện tùy thích và chúng được coi là logic 'HOẶC'.

Ví dụ này trả về danh sách tất cả các phần tử div trong tài liệu với một lớp là "note" hoặc "alert":

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

nguồn: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Trong khi đó, để có được chức năng 'VÀ', ví dụ, bạn có thể chỉ cần sử dụng bộ chọn đa thuộc tính, như jquery nói:

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

Ví dụ. "input[id][name$='man']" chỉ định cả id và tên của phần tử và cả hai điều kiện phải được đáp ứng. Đối với các lớp, nó hiển nhiên như " .class1.class2" để yêu cầu đối tượng của 2 lớp.

Tất cả các kết hợp có thể có của cả hai đều hợp lệ, vì vậy bạn có thể dễ dàng nhận được các biểu thức 'OR' và 'AND' tinh vi hơn.

Question 4

Có, querySelectorAllcó một nhóm các bộ chọn :

form, p, legend

Question 5

Với JavaScript thuần túy, bạn có thể làm điều này (chẳng hạn như SQL) và bất kỳ thứ gì bạn cần, về cơ bản:

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

Mở rộng đoạn mã