[JavaScript] Queryselector/ClassList

2023년 08월 07일

KIMJAVAN
작성자
2023.08.07.: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	지정한 클래스 값이 존재하는지 확인한다

실전예제

<div class=”image-box”></div> document.queryselector(”.image-box”);
<div class=”image-box”></div><div class=”image-box”></div> document.queryselectorAll(”.image-box”);
<div class=”image-box”></div>
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>

버튼으로 각각의 div에 transform속성을 부여하는 예제

'자바스크립트 > JavaScript' 카테고리의 다른 글

[JavaScript] 해당 섹션이 화면에 보일 때 애니메이션을 실행하는 코드 (0)	2023.10.18
[JS] for each로 gsap 사용하기 (0)	2023.10.05
[JavaScript] 새로 고침 시 최상단으로 이동하는 코드 (0)	2023.08.11
[JavaScript] 무한 스크롤 (0)	2023.08.07
[JavaScript] 변수 / 재할당 (0)	2023.08.07

다음 글이 없습니다.

이전 글이 없습니다.

'자바스크립트 > JavaScript' 카테고리의 다른 글

티스토리툴바