querySelectorAll birden çok koşulla

Question 1

Birden fazla ilgisiz koşul kullanarak querySelectorAll ile arama yapmak mümkün müdür? Evet ise nasıl? Ve bunların VE veya VEYA kriterleri olup olmadığı nasıl belirlenir?

Örneğin:

Nasıl tüm bulmak için formun s, p ler ve efsane tek olan s querySelectorAll çağrısı? Mümkün?

Question 2

querySelectorAllBirden fazla ilgisiz koşul kullanarak arama yapmak mümkün müdür ?

Evet, çünkü querySelectorAlltam CSS seçicilerini kabul eder ve CSS, birden fazla ilgisiz seçici belirtmenize olanak tanıyan seçici gruplar kavramına sahiptir . Örneğin:

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

... bir form veya p veya olan herhangi bir öğeyi içeren bir liste döndürür legend.

CSS ayrıca başka bir konsepte de sahiptir: Daha fazla kritere göre kısıtlama. Bir seçicinin birden çok yönünü birleştirirsiniz. Örneğin:

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

... diğer öğeleri yok sayarak div, aynı zamanda ( ve ) sınıfa sahip tüm öğelerin bir listesini döndürür .foodiv

Elbette bunları birleştirebilirsiniz:

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

... aracı "Herhangi dahil olan divaynı zamanda sahip olduğu eleman foosınıfını, herhangi payrıca sahip eleman barsınıfını ve herhangi legendbir iç de var elemanı div."

Question 3

Belgelere göre, herhangi bir css seçicide olduğu gibi, istediğiniz kadar koşul belirtebilirsiniz ve bunlar mantıksal 'VEYA' olarak değerlendirilir.

Bu örnek, belgedeki tüm div öğelerinin "not" veya "uyarı" sınıfıyla birlikte bir listesini döndürür:

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

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

Bu arada, 'VE' işlevini elde etmek için, örneğin, jquery'nin dediği gibi, basitçe bir çoklu özellik seçici kullanabilirsiniz:

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

ör. "input[id][name$='man']" öğenin hem kimliğini hem de adını belirtir ve her iki koşulun karşılanması gerekir. Sınıflar için .class1.class22 sınıfın nesnesini zorunlu kılmak " " kadar açıktır .

Her ikisinin tüm olası kombinasyonları geçerlidir, böylece daha karmaşık 'VEYA' ve 'VE' ifadelerinin eşdeğerlerini kolayca elde edebilirsiniz.

Question 4

Evet, querySelectorAllbir grup seçici alıyor :

form, p, legend

Question 5

Saf JavaScript ile bunu (SQL gibi) ve ihtiyacınız olan her şeyi yapabilirsiniz, temel olarak:

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

Snippet'i genişlet