querySelector 사용방법특정 속성 집합을 가진 요소에 대해서만 모두?

querySelector 사용방법특정 속성 집합을 가진 요소에 대해서만 모두?

사용하려고 합니다.document.querySelectorAll다음이 있는 모든 확인란에 대해value속성 집합.

페이지에 없는 다른 확인란이 있습니다.valueset 및 값은 확인란마다 다릅니다.ID와 이름은 고유하지 않습니다.

예:<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

값이 설정된 확인란만 선택하려면 어떻게 해야 합니까?

사용가능querySelectorAll()다음과 같이:

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

이 뜻은 다음과 같습니다.

속성 "value"를 가진 모든 입력을 얻으며 공백이 아닌 속성 "value"를 갖습니다.

이 데모에서는 빈 값이 아닌 확인란을 비활성화합니다.

예를 들어 다음과 같이 하십시오.

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

$$를 문서로 대체합니다.쿼리선택기예제의 모든 내용:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

추가 라이브러리 없이 다음을 추가하기만 하면 위의 예를 직접 사용할 수 있습니다.

const $$ = document.querySelectorAll.bind(document);

몇 가지 추가 사항:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()

추가 팁:

여러 개의 "nots"(숨기지 않고 비활성화되지 않은 입력):

:not([type="hidden"]):not([disabled])

또한 이를 수행할 수 있다는 사실을 알고 계셨습니까?

node.parentNode.querySelectorAll('div');

이것은 jQuery의 것과 맞먹습니다.

$(node).parent().find('div');

효과적으로 "노드" 이하의 모든 디브를 재귀적으로 찾을 수 있는 HOT DAMN!

언급URL : https://stackoverflow.com/questions/10777684/how-to-use-queryselectorall-only-for-elements-that-have-a-specific-attribute-set