자바스크립트 이벤트를 배울때 <button>태그에 onClick 이벤트 속성을 자바스크립트 함수와  연결하여 사용했지만 이것은 효과적인 코딩 방법이 아니였다.

 

HTML, CSS, JS는 각기다른 기능을 맡고 있기 때문에 연결되는 접점을 분리를 해주어야 효과적으로 관리할 수 있다. 이를 위해서 자바스크립트에서는 classList 함수를 사용하여 HTML 요소에 class 속성을 추가, 제거, 변경, 여부확인이 가능하다.

 



JavaScript - Element.classList

<div class="classN1 classN2 classN3"></div>

<script>
const test = document.querySelector(".classN1");
console.log(test.classList);
</script>

 

자바스크립트 classList

 

classList를 이용하여 해당 요소를 출력했을 때 DOMTokenList를 출력하며, 여기에는 배열의 형태로 클래스의 이름들이 저장되어있다.

 

 

ele.classList.add(String)

해당 요소의 클래스 속성값을 추가, 같은 클래스명 있는 경우 무시

 

const ele = document.querySelector(".classN");
ele.classList.add("classN2");

console.log(ele.classList);

//DOMTokenList(2) ["classN", "classN2", value: "classN classN2"]

 

 

ele.classList.remove(String)

클래스의 속성값을 체크하여 제거한다. 없는 경우 무시

 

const ele = document.querySelector(".classN");
ele.classList.remove("classN");

console.log(ele.classList);

// DOMTokenList [value: ""]

 

ele.classList.remove('target ClassName', 'remove ClassName')

이렇게도 사용가능

 

 

ele.classList.toggle(String)

클래스의 속성값이 없는 경우 추가하며 추가했을 경우 다시 제거 그리고 반복

 

 

ele.classList.contains(String)

해당 요소의 클래스의 유무를 확인하여 true 또는 false로 구분

 

const ele = document.querySelector(".classN");

console.log(ele.classList.contains("classN"));

// true

 

ele.classList.replace(str,  str)

기존의 클래스 이름을 새로운 클래스 이름으로 변경

 

ele.classList.replace(이전 클래스 명, 변경될 클래스 명)

 

const ele = document.querySelector(".classN");
ele.classList.replace("classN", "NewClassN");

console.log(ele.classList);

// DOMTokenList ["NewClassN", value: "NewClassN"]

 

저작자표시