자바스크립트/JavaScript

[JavaScript] Queryselector/ClassList

KIMJAVAN 2023. 8. 7. 10:00
728x90

dom트리 : 웹 문서 안에 있는 요소들간의 부모 자식 관계를 계층구조로 나타낸 것

각각의 요소들을 node라고함

요소노드의 속성노드는 자식노드이다

getElementById()

getElementsByClassName() > 반환 값이 2개 이상일 수 있음

getElementsByTagName() > 반환 값이 2개 이상일 수 있음

querySelector(”#ID”) / querySelector(”.ClassName”) / querySelector(”p”)

.addEventListener(’동작’,함수(이벤트 타겟));

queryselector(선택자) 한 개의 값을 반환함 / 반환 값이 여러 개일 경우 제일 처음 요소를 선택함(ex.class)

queryselectorAll(선택자 또는 태그) 반환 값이 여러 개 일 때 모두 반환해서 노드 리스트로 저장함
addEventListener 대상에 이벤트를 추가한다.
Element.classList 웹 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다.
classList.add 지정한 클래스 값을 추가한다
classList.remove 지정한 클래스 값을 제거한다
classList.toggle 지정한 클래스 값을 토글링한다(추가-제거)
classList.contain 지정한 클래스 값이 존재하는지 확인한다

실전예제

  1. <div class=”image-box”></div> document.queryselector(”.image-box”);
  2. <div class=”image-box”></div><div class=”image-box”></div> document.queryselectorAll(”.image-box”);
  3. <div class=”image-box”></div>
  4. div에 클래스를 추가하여 background-color를 바꾸는 예제
<style>
	div{background-color:cyan;}
	.active{background-color:red;}
</style>

<body>
	<div class='box'></div>
	<script>
	const firstDiv=document.querySelector(".box");
	       firstDiv.addEventListener('click',function(){
	        firstDiv.classList.add('active');
	       });
	</script>
</body>
  1. 버튼으로 각각의 div에 transform속성을 부여하는 예제