Web/JavaScript
[JavaScript]querySelectorAll을 사용하여 특정 Dom의 input 자식 요소 순환하기
금백조
2023. 2. 6. 21:47
반응형
특정 section 태그 내에 있는 input 자식 요소들을 찾아 모든 요소에 disabled 속성을 주고 싶었습니다. 그래서 이를 querySelectorAll을 사용하여 구현했습니다.
[querySelectorAll 예제]
function myFunction() {
document.querySelectorAll('.section-1 input').forEach((element) => {
element.disabled = element.disabled ? false : true;
});
}
[전체 구현 예제]
<!DOCTYPE html>
<html>
<body>
<section class="section-1">
<input id="input-1"/>
<button onclick="myFunction()">Click</button>
<section/>
<script>
function myFunction() {
//querySelectorAll을 이용하여 section-1 을 class로 갖는 section 태그의 자식 요소 input을 모두 선택
document.querySelectorAll('.section-1 input').forEach((element) => {
element.disabled = element.disabled ? false : true;
});
}
</script>
</body>
</html>
[실행 결과]
버튼 클릭 시 마다 비활성화(disabled=true) 상태면 활성화, 활성화 상태면 비활성화로 바꿈.
활성화
비활성화
반응형