[JS] ClassName&ClassList

ClassName

• 특정 element의 class property value를 가져오거나 설정할 수 있다.
• 이전 class를 상관하지 않고 교체해버린다.

const aName = element.className;

element.className = aName;

---

ClassList

• class를 목록으로 작업할 수 있게 허용해준다.
• 이전 class를 교체하지 않는다.

classList를 이용하는 이유

HTML element가 가지고 있는 class element를 JS에서 조작할 수 있도록 하기 위해서다.

method

1. add

classList.add(string [, string [, ...]])

지정한 class value를 추가한다.

• 만약 추가하려는 class가 element의 class property에 이미 존재한다면 무시된다.

2. remove

classList.remove(string [, string [, ...]])

지정한 class value를 제거한다.

3. toggle

확인하고자 하는 list를 확인하여 있으면 remove, 없으면 add

function hadleTitleClick(){
  h1.classList.toggle("clicked");}

= /* 위의 toggle 코드는 아래의 긴 코드를 구현한것 */
  
function handleTitleClick(){
  const clickedClass = "clicked";
  if (h1.classList.contains(clickedClass)){
    h1.classList.remove(clickedClass);}
  else {
    h1.classList.add(clickedClass);} }

4. contains

명시한 class가 HTML element의 class에 포함되어 있는지 확인한다.