반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 업무 자동화
- tomcat
- Tomcat Error
- Vue.config
- 프록시 예제
- .NET Core Proxy
- SQLP
- .NET Core
- vue3
- 웹 크롤링
- MSSQL 동적 쿼리
- Vue configureWebpack
- Visual Studio 재설치
- MSSQL 문자열
- Visual Studio 2015 강제 삭제
- spring
- 웹 자동화
- Visual Studio 강제 삭제
- Visual Studio 패키지에 실패했습니다.
- 리버스 프록시 예제
- 디자인 패턴 사례
- Nginx Reverse Proxy
- Vue3 configureWebpack
- Visual Studio 2015 삭제
- Selenium 설치
- Visual Studio 2015 설치
- javascript
- vue
- Selenium 환경
- vue.js
Archives
- Today
- Total
금백조의 개발 블로그
[Javascript]not연산자를 이용한 querySelectorAll 필터링 본문
반응형
서론
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 |