querySelectorAll z wieloma warunkami

Question 1

Czy można przeprowadzić wyszukiwanie za pomocą querySelectorAll, używając wielu niepowiązanych warunków? Jeśli tak, to jak? A jak określić, czy są to kryteria AND czy OR?

Na przykład:

Jak znaleźć wszystkie formularze s, p si legendy za pomocą jednego wywołania querySelectorAll ? Możliwy?

Question 2

Czy można przeprowadzić wyszukiwanie przy querySelectorAllużyciu wielu niepowiązanych ze sobą warunków?

Tak, ponieważ querySelectorAllakceptuje pełne selektory CSS, a CSS ma koncepcję grup selektorów , która pozwala określić więcej niż jeden niepowiązany selektor. Na przykład:

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

... zwróci listę zawierającą dowolny element, który jest form lub p lub legend .

CSS ma również inną koncepcję: ograniczanie oparte na większej liczbie kryteriów. Po prostu łączysz wiele aspektów selektora. Na przykład:

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

... zwróci listę wszystkich divelementów, które również ( i ) mają klasę foo, ignorując inne divelementy.

Możesz je oczywiście łączyć:

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

... co oznacza „Uwzględnij każdy divelement, który również ma fooklasę, każdy pelement, który również ma barklasę, i każdy legendelement, który również znajduje się wewnątrz a div”.

Question 3

Zgodnie z dokumentacją, tak jak w przypadku każdego selektora css, możesz określić dowolną liczbę warunków i są one traktowane jako logiczne „LUB”.

Ten przykład zwraca listę wszystkich elementów div w dokumencie z klasą „note” lub „alert”:

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

źródło: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

W międzyczasie, aby uzyskać funkcjonalność „AND”, możesz na przykład po prostu użyć selektora wielu atrybutów, jak mówi jquery:

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

dawny. "input[id][name$='man']" określa zarówno id, jak i nazwę elementu i oba warunki muszą być spełnione. Dla klas jest tak oczywiste, jak .class1.class2wymaganie obiektu dwóch klas.

Wszystkie możliwe kombinacje obu są poprawne, więc możesz łatwo uzyskać odpowiednik bardziej wyrafinowanych wyrażeń „LUB” i „ORAZ”.

Question 4

Tak, querySelectorAllbierze grupę selektorów :

form, p, legend

Question 5

Za pomocą czystego JavaScript możesz to zrobić (na przykład SQL) i wszystko, czego potrzebujesz, w zasadzie:

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

Rozwiń fragment