금백조의 개발 블로그

[Javascript]not연산자를 이용한 querySelectorAll 필터링 본문

Web/JavaScript

[Javascript]not연산자를 이용한 querySelectorAll 필터링

금백조 2023. 3. 26. 18:27
반응형

서론

 

input 태그들을 querySelectorAll로 가져와 value를 초기화해주려고 했는데 radio type이 아닌 input만 가져와서 초기화를 해야했습니다. 이 과정에서 알게된 not 연산자를 이용한 querySelectorAll 필터링 방법에 대해 소개하겠습니다.

 

 

본론

 

AND 조건

 

해석 : input 태그 중 radio type이 아니고 class가 test가 아닌 input 전부 가져오기

const inputs = document.querySelectorAll("input:not([type='radio']):not([class='test'])")

 

OR 조건

 

해석 : input 태그 중 radio type이 아니거나 class가 test가 아닌 input 전부 가져오기

const inputs = document.querySelectorAll("input:not([type='radio']), input:not([class='test'])")

 

예제

<!DOCTYPE html>
<html>
<body>

<h2>not 연산자를 이용한 querySelectorAll 필터링 예제</h2>

<form>
  <section class='person-info'>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  
  <label for="front_lang">FrontEnd Language:</label><br>
  
  <input type="radio" id="html" name="front_lang" value="HTML" checked>
  	<label for="html">HTML</label>
  <input type="radio" id="css" name="front_lang" value="CSS">
  	<label for="css">CSS</label>
  <input type="radio" id="javascript" name="front_lang" value="JavaScript">
  	<label for="javascript">JavaScript</label><br><br>
  </section>    
  <input type="button" value="초기화" onClick=initMethod()>
</form>


</body>
</html>

<script>
const initMethod = () => {
	  const section = document.querySelector("section[class='person-info']");
    const inputs = section.querySelectorAll("input:not([type='radio'])");//radio type 아닌 input만 가져오기
    inputs.forEach(input => {
    	input.value="";
    });
}
</script>
반응형
저작자표시 비영리 변경금지

'Web > JavaScript' 카테고리의 다른 글

[JavaScript]form submit 2번 연속 발생 해결  (0) 2023.02.08
[JavaScript]querySelectorAll을 사용하여 특정 Dom의 input 자식 요소 순환하기  (0) 2023.02.06
[JavaScript]JSP에서 JavaScript로 EL(Expression Language)값 할당 방법(2021-09-20 내용추가)  (0) 2021.02.21
'Web/JavaScript' Related Articles more