자바스크립트/JavaScript

[JS] QuerySelector / classList

KIMJAVAN 2024. 1. 24. 19:54
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속성을 부여하는 예제
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: lavender;
            border:2px solid black;
            transition: all 0.4s ease;
        }

        body{
            display: flex;
            justify-content: space-between;
        }
        .contain-box{
            display: flex;
            flex-direction: column;
        }
        button{
            background-color: black;
            color: white;
        }

        .translateform{
            transform: translate(-100px,-100px);
        }
        .rotateform{
            transform: rotate(180deg);
        }
        .scaleform{
            transform: scale(0.5);
        }
    </style>

</head>
<body>
    
    <div class="contain-box">
        <div class="box translate-box"></div>
        <button class="translate">translate</button>
    </div>
    <div class="contain-box">
        <div class="box rotate-box"></div>
        <button class="rotate">rotate</button>
    </div>
    <div class="contain-box">
        <div class="box sclae-box"></div>
        <button class="scale">sclae</button>
    </div>
    
    <script>
        const translateBox=document.querySelector(".translate-box");
        const translateButton=document.querySelector('.translate');
        translateButton.addEventListener('click',function(){
            translateBox.classList.toggle('translateform');
        });

        const rotateBox=document.querySelector(".rotate-box");
        const rotateButton=document.querySelector('.rotate');
        rotateButton.addEventListener('click',function(){
            rotateBox.classList.toggle('rotateform');
        });

        const scaleBox=document.querySelector(".sclae-box");
        const scaleButton=document.querySelector('.scale');
        scaleButton.addEventListener('click',function(){
            scaleBox.classList.toggle('scaleform');
        });
    </script>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)