여러 조건이있는 querySelectorAll

Question 1

관련없는 여러 조건을 사용하여 querySelectorAll로 검색 할 수 있습니까? 그렇다면 어떻게? AND 또는 OR 기준인지 지정하는 방법은 무엇입니까?

예를 들면 :

단일 querySelectorAll 호출로 모든 양식 s, p s 및 legend 를 찾는 방법은 무엇입니까? 가능한?

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돌며이기도 요소를 div."

Question 3

문서에 따르면 CSS 선택기와 마찬가지로 원하는만큼 조건을 지정할 수 있으며 논리적 'OR'로 처리됩니다.

이 예제는 "note"또는 "alert"클래스가있는 문서 내의 모든 div 요소 목록을 반환합니다.

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

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

한편 'AND'기능을 얻으려면 예를 들어 jquery가 말한 것처럼 다중 속성 선택기를 사용하면됩니다.

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

전의. "input[id][name$='man']" 요소의 ID와 이름을 모두 지정하고 두 조건이 모두 충족되어야합니다. 클래스의 경우 .class1.class2두 클래스의 객체를 요구하는 것이 " " 만큼 분명 합니다.

두 가지의 가능한 모든 조합이 유효하므로보다 정교한 'OR'및 'AND'표현식에 해당하는 것을 쉽게 얻을 수 있습니다.

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>

스 니펫 확장