06. 속성 노드 조작 방법 (className, classList)

양희준·2022년 3월 12일
0

DOM

목록 보기
6/8
post-thumbnail

📌 6-1 요소 노드의 class 조작

속성 노드에 속하는 class는 주로 CSS를 조작하기 위해 사용한다.

💡 메소드를 이용해서 이벤트위임을 할 때도 사용된다.
💡 DOM에 접근할 때 className, classList로 접근하는 이유는 JS에서 이미 class는 예약어이기 때문이다.
💡 className은 문자열을 반환하는 프로퍼티로 className을 바꿀수 있다.
💡 classList는 메소드를 제공하여 더욱더 세부적인 조정을 가능하게 해준다.

📌 6-2 class 추가

🧩 Element.prototype.classList.add(className)

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
    <body>
        <span id="title" class="bold">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 class에 red 추가
        $btn.addEventListener("click", () => {
            $title.classList.add("red");
            // 결과 : bold red
            console.log($title.className);
        });
    </script>
</html>

🔥 class는 이름의 공백을 기준으로 CSS를 넣는다. 또한 CSS가 겹치면 class 이름의 마지막 CSS를 참조한다.

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
    <body>
        <span id="title" class="bold">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 class에 red blue 추가
        $btn.addEventListener("click", () => {
            $title.classList.add("red")
            $title.classList.add("blue");
            // 결과 : bold red blue 
            // (해당 텍스트 색깔은 파랑색 왜냐면 red보다 blue가 이름이 뒤에있음)
            console.log($title.className);
        });
    </script>
</html>

📌 6-3 class 삭제

🧩 Element.prototype.classList.remove(className)

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
    <body>
        <span id="title" class="bold red">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 class에 red 삭제        
        $btn.addEventListener("click", () => {
            $title.classList.remove("red")
            // 결과 : bold
            console.log($title.className);
        });
    </script>
</html>

📌 6-4 class 확인

🧩 Element.prototype.classList.contains("클래스 이름")

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
    <body>
        <span id="title" class="bold red">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 class에 요소가 포함되는지 확인
        $btn.addEventListener("click", () => {
            // 결과 : true
            console.log($title.classList.contains("red"));
            // 결과 : false
            console.log($title.classList.contains("blue"));
            // 결과 : true
            console.log($title.classList.contains("bold"));
        });
    </script>
</html>

📌 6-5 class 변경

🧩 Element.prototype.classList.replace(oldClassName, newClassName)

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
    <body>
        <span id="title" class="bold red">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 class에 red를 blue로 변경
        $btn.addEventListener("click", () => {
            $title.classList.replace("red", "blue");
            // 결과 : bold blue
            console.log($title.className);
        });
    </script>
</html>

📌 6-6 class 추출

🧩 Element.prototype.classList.item(index)

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
    <body>
        <span id="title" class="bold red">Hello</span>
        <button id="btn" type="button">add</button>
    </body>
    <script>
        const $title = document.querySelector("#title");
        const $btn = document.querySelector("#btn");
        // 버튼을 누르면 classList의 요소 추출
        $btn.addEventListener("click", () => {
            // 결과 : bold
            console.log($title.classList.item(0));
            // 결과 : red
            console.log($title.classList.item(1));
            // 배열처럼 접근해서 값을 바꾸는건 불가능 add, replace 등등 메소드를 사용
            try {
                $title.classList.item(1) = "blue";
            } catch {
                console.log("error");
            }
        });
    </script>
</html>

🔥 클래스 이름의 요소를 추출 즉 요소의 값을 얻을 떄의 인덱스 처럼 사용하는 번호는
String.split(" ")을 해서 문자열로 반환한거랑 같다고 보면된다.

profile
JS 코린이

0개의 댓글