자바스크립트에서 여러 조건을 가진 "querySelectorAll()"
다음 주까지 검색이 가능한가요?querySelectorAll()관련이 없는 여러 조건을 이용하고 있습니까?만약 그렇다면, 어떻게?그리고 그것들이 AND인지 아니면 OR 기준인지 어떻게 지정합니까?
예를 들어,
하나로 모든 양식, ps, 범례를 찾는 방법querySelectorAll()전화? 가능할까요?
다음 주까지 검색이 가능한가요?
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클래스 등등legendA 안에 있는 요소도div."
설명서에 따르면 다른 css 셀렉터와 마찬가지로 원하는 만큼 조건을 지정할 수 있으며 논리적 'OR'로 처리됩니다.
다음 예제에서는 문서 내의 모든 div 요소 목록을 "note" 또는 "alert" 클래스로 반환합니다.
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" 2개 클래스의 객체가 필요합니다.
가능한 두 가지 조합 모두 유효하므로 보다 정교한 'OR' 및 'AND' 표현을 쉽게 얻을 수 있습니다.
순수 자바스크립트를 사용하면 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>예, 셀렉터 그룹을 사용합니다.
form, p, legend
그냥 사용하는 것document.querySelectorAll('selector1, selector2, selector3')내게 도움이 되지 않았고, 사용해야만 했습니다.forEach()원하는 결과를 얻을 수 있는 방법을 제공합니다.
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>querySelectorAll() 사용 시:
- 논리 AND(&&)는 쉼표 없이 요소와 속성을 지정하여 보관할 수 있습니다.
- 논리 OR(||)은 쉼표로 요소와 속성을 지정하여 보관할 수 있습니다.
예를 들어 다음과 같은 두 가지 형태가 있습니다.
<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>
<논리 AND (&&)>
그런 다음 애플과 바나나를 선택할 수 있습니다.[name="fruits"]아래와 같이
document.querySelectorAll('[name="fruits"]');
// Apple's <input> and Banana's <input>
이제 쉼표 없이 요소와 속성을 지정하면 아래와 같이 Apple만 선택할 수 있습니다.
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
document.querySelectorAll('form.form1 input[name="fruits"][id="input1"]');
// Apple's <input>
또한, 대체 가능합니다..form1와 함께[class="form1"]그리고.[id="input1"]와 함께#input1아래와 같이
// .form1 [id="input1"]
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
document.querySelectorAll('form[class="form1"] input[name="fruits"]#input1');
// Apple's <input>
<논리 OR (| | )>
다음으로 애플 제품을 선택할 수 있습니다.#input1아래와 같이
document.querySelectorAll('#input1');
// Apple's <input>
이제 쉼표로 요소와 속성을 지정하면 아래와 같이 Apple, Orange, Banana, Kwi's를 선택할 수 있습니다.
// ↓ ↓ ↓ ↓ ↓
document.querySelectorAll('#input1, #input2, p');
// ↑ ↑
// Apple's <input>, Orange's <p>, Banana's <input> and Kiwi's <p>
<논리 AND(&)> 및 <논리 OR(||)>
또한 다음과 같이 Logical AND와 Logical OR을 함께 사용할 수도 있습니다.
document.querySelectorAll('input#input1, input#input2, p#p1')[
// Apple's <input>, Orange's <p> and Banana's <input>
언급URL : https://stackoverflow.com/questions/34001917/queryselectorall-with-multiple-conditions-in-javascript
'programing' 카테고리의 다른 글
| 이진 모드에서 stdout을 쓰기 위한 가장 간단한 방법은 무엇입니까? (0) | 2023.10.25 |
|---|---|
| MS 파워셸 스크립트로 빌드 - 빌드가 성공했는지 어떻게 알 수 있습니까? (0) | 2023.10.25 |
| WooCommerce 관련 상품의 동일 카테고리 앞에 교차판매 표시 (0) | 2023.10.25 |
| 재스민:돌연변이 관찰자를 조롱하는 방법? (0) | 2023.10.25 |
| Silver Searcher - 파일을 무시하는 방법 (0) | 2023.10.25 |