[JS] classList속성 <ul class="ul list iter">

 classList속성

element.classList : class 속성의 값은 여러개가 올 수 있으므로 list의 형태로 리턴받음

• 리턴 타입은 TokenList(리스트의 개수)
• 즉, 객체이기 때문에 별도의 메소드 사용이 가능!
• 대표적인 메서드 : add(), contains(), toggle(), remove()..
• 다른 메서드들은 사용도가 낮음

 

 

== 사용 ==

 

 

<ul class="ul list iter">

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

 </ul>

<script>

        const ul = document.getElementsByTagName('ul');

        console.log(ul); //HTMLCollection(1)

        console.log(ul[0]); //<ul class="ul list ul2 after"></ul>

        console.log(ul[0].classList); //DOMTokenList(3) -> ul, list, iter

        console.log(ul[0].classList.length); //리스트의 개수: 3

</script>

 

 

 

== 메서드 == 

 const ul = document.getElementsByTagName('ul') ;  이라는 가정하에 사용

 

classList.add( '  ' );   :  클래스 추가

 

<ul class="ul list iter"> </ul>

 

 ul[0].classList.add('ul2');

console.log(ul[0].classList); //DOMTokenList(4) -> ul, list, iter, ul2

 

 

classList.remove( '  ' );   :  클래스 삭제

 

<ul class="ul list iter"> </ul>

 

ul[0].classList.remove('iter');

console.log(ul[0].classList); // DOMTokenList(2) -> ul, list

 

 

classList.contains( '  ' );   :  클래스 탐색 (있으면 true / 없으면 false)

 

<ul class="ul list iter"> </ul>

 

let bool = ul[0].classList.contains('iter');

console.log(bool); //true

 

 

 

classList.toggle( '  ' );   :  클래스  변환 ( 있으면 삭제 / 없으면 추가(가장 뒤에) )

 

<ul class="ul list"> </ul>

 

ul[0].classList.toggle('iter');

console.log(ul[0].classList); //DOMTokenList(3) -> 'ul', 'list',  'iter'

 

 

classList.replace( 'old ' , 'new' );   :  클래스 대체 ( old -> new로 변경 )

 

<ul class="ul list iter"> </ul>

 

ul[0].classList.replace('iter','after');

console.log(ul[0].classList); //DOMTokenList(3) -> 'ul', 'list', 'after'