자바스크립트에서 classList 함수를 사용해서 해당 요소에 특정 class를 확인하거나, 추가, 제거, 변경 할 수 있다.
classList
<div class="class1 class2 class3"></div>
<script>
var test = document.querySelector(".class1");
document.write(test.classList); //class1 class2 class3
document.write(test.classList[0]); //class1
document.write(test.classList[1]); //class2
document.write(test.classList[2]); //class3
document.write(test.classList[3]); //undefined
</script>
우선 class1 클래스를 가지고 있는 태그 요소를 document.querySelector를 이용해서 가져오고 test 변수에 저장했다.
classList를 이용하면 해당 요소의 클래스들의 목록을 확인할 수 있다.
가지고 있는 클래스의 목록이 확인되고 각 클래스들은 classList 배열에 하나씩 저장되어 있다.
클래스 하나씩 가져오기 위해 배열 인덱스값을 이용했다. 클래스가 3개로 classList[2]까지 저장되어 있기 때문에 [3]을 출력하면 undefined로 뜬다.
classList.contains()
document.write(test.classList.contains('class1')); //true
document.write(test.classList.contains('class4')); //false
해당 클래스를 포함하고 있는지 확인한다. 포함하면 true, 포함하지 않으면 false를 반환한다.
classList.add()
test.classList.add('class1');
document.write(test.classList); //class1 class2 class3
test.classList.add('class4');
document.write(test.classList); //class1 class2 class3 class4
클래스를 추가할 수있다.
하나의 태그에 동일한 클래스가 여러번 들어가지는 않기 때문에 이미 존재하는 클래스는 add해도 무시된다.
classList.remove()
test.classList.remove('class4');
document.write(test.classList); //class1 class2 class3
remove로 존재하는 클래스를 삭제할 수 있다.
classList.replace( , )
test.classList.replace('class1','classA');
document.write(test.classList); //classA class2 class3
replace로 기존의 클래스 이름을 새로운 클래스 이름으로 변경한다. class1이 classA로 변경된 것을 확인하였다.
'WEB > JavaScript' 카테고리의 다른 글
JSON : 데이터를 표현하기 위한 문자 기반의 표준 포맷 (0) | 2022.06.17 |
---|---|
정규표현식, 정규식 (regular expression) (0) | 2022.06.16 |
자바스크립트 : Date() / 이번 달 달력 만들기 (0) | 2022.06.16 |
자바스크립트 : 이벤트 event (1) | 2022.06.16 |
자바스크립트 : 배열 생성, 데이터 추가, 출력 / indexOf / splice / join / split (1) | 2022.06.15 |