속성 노드에 속하는 class는 주로 CSS를 조작하기 위해 사용한다.
💡 메소드를 이용해서 이벤트위임을 할 때도 사용된다.
💡 DOM에 접근할 때 className, classList로 접근하는 이유는 JS에서 이미 class는 예약어이기 때문이다.
💡 className은 문자열을 반환하는 프로퍼티로 className을 바꿀수 있다.
💡 classList는 메소드를 제공하여 더욱더 세부적인 조정을 가능하게 해준다.
🧩 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>
🧩 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>
🧩 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>
🧩 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>
🧩 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(" ")을 해서 문자열로 반환한거랑 같다고 보면된다.