„querySelectorAll()“ mit mehreren Bedingungen in JavaScript

Question 1

Ist es möglich, eine Suche durchzuführen? querySelectorAll() mehrere unabhängige Bedingungen verwenden? Wenn ja, wie? Und wie kann man angeben, ob es sich dabei um UND- oder ODER-Kriterien handelt?

Zum Beispiel:

So finden Sie alle formS, Ps und Legendes mit einer Single querySelectorAll() Forderung? Möglich?

Question 2

Ist es möglich, eine Suche durchzuführen? querySelectorAll mehrere unabhängige Bedingungen verwenden?

Ja, weil querySelectorAll akzeptiert vollständige CSS-Selektoren und CSS hat das Konzept von Selektorgruppen, wodurch Sie mehr als einen unabhängigen Selektor angeben können. Zum Beispiel:

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

…gibt eine Liste zurück, die jedes Element enthält, das a ist form oder p oder legend.

CSS hat auch das andere Konzept: Einschränken basierend auf mehr Kriterien. Sie kombinieren einfach mehrere Aspekte eines Selektors. Zum Beispiel:

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

…gibt eine Liste aller zurück div Elemente, die Auch (Und) habe die Klasse fooandere ignorieren div Elemente.

Sie können sie natürlich auch kombinieren:

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

…was bedeutet „Beliebige einbeziehen“. div Element, das auch das hat foo Klasse, irgendein p Element, das auch das hat bar Klasse und alle legend Element, das sich auch in a befindet div.”

Question 3

Laut Dokumentation können Sie wie bei jedem CSS-Selektor so viele Bedingungen angeben, wie Sie möchten, und diese werden als logisches „ODER“ behandelt.

Dieses Beispiel gibt eine Liste aller div-Elemente im Dokument mit der Klasse „note“ oder „alert“ zurück:

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

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Um die „AND“-Funktionalität zu erhalten, können Sie beispielsweise einfach einen Multiattribut-Selektor verwenden, wie jquery sagt:

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

ex. "input[id][name$='man']" Gibt sowohl die ID als auch den Namen des Elements an und beide Bedingungen müssen erfüllt sein. Für den Unterricht ist es so offensichtlich wie „.class1.class2„um ein Objekt von 2 Klassen zu erfordern.

Alle möglichen Kombinationen aus beiden sind gültig, sodass Sie leicht ein Äquivalent zu anspruchsvolleren „OR“- und „AND“-Ausdrücken erhalten können.

Question 4

Mit reinem JavaScript können Sie dies tun (z. B. SQL) und alles, was Sie brauchen, im Grunde:

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

Question 5

Ja, querySelectorAll dauert eine Gruppe von Selektoren:

form, p, legend

Question 6

Nur verwenden document.querySelectorAll('selector1, selector2, selector3') Hat bei mir nicht funktioniert, musste verwendet werden forEach() Methode anwenden, um das gewünschte Ergebnis zu erzielen.

document.querySelectorAll('selector1, selector2, selector3').forEach(item => {
        item.//code
    })

document.querySelectorAll('#id1, #id2, #id3').style="background-color: red";
document.querySelectorAll('#id4, #id5, #id6').forEach(item => {
    item.style="background-color: red";
})

<div id="id1">id1</div>
<div id="id2">id2</div>
<div id="id3">id3</div>
<div id="id4">id4</div>
<div id="id5">id5</div>
<div id="id6">id6</div>

Question 7

Mit querySelectorAll():

Logisches UND (&&) können durch Angabe von Elementen und Attributen ohne Kommas archiviert werden.

Logisches ODER (||) können durch Angabe von Elementen und Attributen mit Kommas archiviert werden.

Es gibt beispielsweise zwei Formen, wie unten gezeigt:

<form class="form1" method="post">
  <input type="text" id="input1" name="fruits" value="Apple">
  <p id="p1">Orange</p>
</form>
<form class="form2" method="post">
  <input type="text" id="input2" name="fruits" value="Banana">
  <p id="p2">Kiwi</p>
</form>

Dann können Sie auswählen Äpfel <input> Und Bananen <input> mit [name="fruits"] Wie nachfolgend dargestellt:

document.querySelectorAll('[name="fruits"]');
// Apple's <input> and Banana's <input>

Durch die Angabe von Elementen und Attributen ohne Kommas können Sie nun nur noch auswählen Äpfel <input> Wie nachfolgend dargestellt:

                        // ↓ ↓ ↓ ↓ ↓  ↓ ↓ ↓               ↓ ↓ ↓ ↓ ↓ ↓ ↓     
document.querySelectorAll('form.form1 input[name="fruits"][id="input1"]');
// Apple's <input>

Darüber hinaus können Sie ersetzen .form1 mit [class="form1"] Und [id="input1"] mit #input1 Wie nachfolgend dargestellt:

                        //         .form1                       [id="input1"]
                        //     ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓                     ↓ ↓ ↓ ↓
document.querySelectorAll('form[class="form1"] input[name="fruits"]#input1');
// Apple's <input>

Als nächstes können Sie auswählen Äpfel <input> mit #input1 Wie nachfolgend dargestellt:

document.querySelectorAll('#input1');
// Apple's <input>

Durch Angabe von Elementen und Attributen mit Kommas können Sie nun auswählen Äpfel <input>, Orangen <p>, Bananen <input> Und Kiwis <p> Wie nachfolgend dargestellt:

                        //          ↓ ↓ ↓ ↓  ↓     
document.querySelectorAll('#input1, #input2, p');
                        //        ↑        ↑
// Apple's <input>, Orange's <p>, Banana's <input> and Kiwi's <p>

und

Darüber hinaus können Sie natürlich beides verwenden Logisches UND Und Logisches ODER zusammen, wie unten gezeigt:

document.querySelectorAll('input#input1, input#input2, p#p1')[
// Apple's <input>, Orange's <p> and Banana's <input>