querySelectorAll з кількома умовами

Question 1

Чи можна здійснити пошук за допомогою querySelectorAll, використовуючи кілька не пов'язаних між собою умов? Якщо так, то як? І як визначити, чи це ТІ чи АБО критерії?

Наприклад:

Як знайти всі форми s, p s та легенди s за одним викликом 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елемент, який також знаходиться всередині a div."

Question 3

Згідно з документацією, як і в будь-якому селекторі css, ви можете вказати скільки завгодно умов, і вони розглядаються як логічні "АБО".

Цей приклад повертає список усіх елементів div у документі з класом "note" або "alert":

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.class2" вимагати об'єкта з 2 класів.

Усі можливі комбінації обох дійсні, тому ви можете легко отримати еквівалент більш складних виразів «АБО» та «І».

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>

Розгорніть фрагмент