classList에 대한 공부 출처 : https://sisiblog.tistory.com/234
[javascript] 자바스크립트 classList 사용 방법
참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/ 이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로
sisiblog.tistory.com
Element.classList
Element.classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다.
classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다.
css 클래스 목록 가져오기
element의 CSS 클래스 목록을 가져오는 방법은 아래와 같습니다.
<div id="content" class="main red">JavaScript classList</div>
태그 안에 main 과 red 의 클래스를 가진 div 요소가 있을 때, div element 의 class 목록을 출력하는 코드를 작성해보겠습니다.
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}
querySelector() 메소드를 통해 id가 content인 div element를 가져옵니다.
그다음 element의 classList에 루프를 돌려 각각의 클래스명을 콘솔에 출력합니다.
classList로 요소 안에 class 추가하기
classList의 add() 메소드를 추가합니다.
다음은 info class를 id가 content인 div 태그에 추가하는 코드입니다.
let div = document.querySelector('#content');
div.classList.add('info');
하단의 예제는 여러 개의 class 를 추가하는 코드입니다. 쉼표와 따옴표로 구분하여 추가할 수 있습니다.
let div = document.querySelector('#content');
div.classList.add('info', 'visible', 'block');
classList로 요소 안의 class 삭제하기
remove() 메소드를 사용합니다.
add() 메소드와 마찬가지로 여러개의 클래스명을 한번에 제거할 수도 있습니다.
// 하나만 삭제
let div = document.querySelector('#content');
div.classList.remove('visible');
// 여러개 삭제
let div = document.querySelector('#content');
div.classList.remove('block', 'red');
classList로 요소 안의 class 교체하기
replace() 메소드를 사용하면 됩니다.
다음의 코드는 현재 존재하는 info class를 warning class로 바꾸는 코드입니다.
let div = document.querySelector('#content');
div.classList.contains('warning');
classList로 class 토글하기
토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것입니다.
토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미합니다.
즉, 토글 스위치는 두 가지 상태만을 가지고 있는 스위치입니다.
element의 class 목록에 특정 class명이 들어있다면 toggle() 메소드는 그 class명을 지웁니다.
만약 class 목록에 그 class명이 없다면 toggle() 메소드는 그 class를 element의 class 목록에 추가합니다.
마치 스위치의 on/off를 하듯이 켜져있는 상태에선 꺼짐 상태를 만들고, 꺼짐 상태에서는 켜짐 상태를 만듭니다.
다음의 예제는 toggle() 메소드를 사용해 id가 content인 요소에 visible class를 토글하는 코드입니다.
let div = document.querySelector('#content');
div.classList.toggle('visible');
이제 토글에 대한 예제로 스위치의 on, off처럼 글자를 누르면 색이 변하는 코드를 작성해보겠습니다.
<style>
.text{color: chocolate;}
</style>
</head>
<body>
<p class="text paragraph"> 누르면 색이 변해요. </p>
<button> TOGGLE </button>
<script src="script05.js"> </script>
</body>
style에 색을 입히고 버튼을 누르면 토글이 되도록 설정합니다.
let p = document.querySelector("p")
p.classList.add("goal")
p.classList.remove("paragrape")
console.log(p.classList.contains("text"))
document.querySelector("button").addEventListener("click", function(){
p.classList.toggle("text")
})
여기까지 classList 에 대해서 배워보았습니다.
이 다음에는 배열에 대해서 살펴볼게요.
'자바스크립트 JS > JS 입문 공부일지' 카테고리의 다른 글
| 자바 스크립트(js) 입문 공부 14. Math, 로또 추첨 번호 만들기 (0) | 2022.11.22 |
|---|---|
| 자바 스크립트(js) 입문 공부 13. 배열 메소드 (1) (0) | 2022.11.22 |
| 자바 스크립트(js) 입문 공부 11. 타이머 기능, 자바스크립트로 디지털 시계 만들기 (0) | 2022.11.21 |
| 자바 스크립트(js) 입문 공부 10. 생성자, 기본생성자(Date), 시간의 표시 (0) | 2022.11.17 |
| 자바 스크립트(js) 입문 공부 8. 이벤트 event, addEventListener (0) | 2022.11.16 |