금백조의 개발 블로그

[JavaScript]querySelectorAll을 사용하여 특정 Dom의 input 자식 요소 순환하기 본문

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) 상태면 활성화, 활성화 상태면 비활성화로 바꿈.

 

활성화

 

비활성화

 

 

반응형
저작자표시 비영리 변경금지

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

[Javascript]not연산자를 이용한 querySelectorAll 필터링  (0) 2023.03.26
[JavaScript]form submit 2번 연속 발생 해결  (0) 2023.02.08
[JavaScript]JSP에서 JavaScript로 EL(Expression Language)값 할당 방법(2021-09-20 내용추가)  (0) 2021.02.21
'Web/JavaScript' Related Articles more