자바스크립트 ClassList

classList

const div = document.createElement('div');
// the div class name is foo
div.className = 'foo';
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

1. div을 만들고, 그 클래스 이름은 foo로 하겠당!

classList : remove(지울클라스명)

div.classList.remove("foo");
// <div class=""></div>
console.log(div.outerHTML);

그럼 클라스가 사라진걸 콘솔을 통해서 확인할 수 있다.

classList : add(추가할 클래스 이름)

div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);

아직까지는 이해가 쉽쥬? add = 추가하다!

classList : toggle(토글로 사용할 이름)

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
//<div class="anotherclass visible"></div>
console.log(div.outerHTML);

 

토글은 쉽게 스위치버튼이라고 생각하면된다 :) 보였다 안보였다

classList :toggle("토글로 사용할 이름",  조건)

let i = 11;
// i = 2;
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.outerHTML);

해석해보자면 let으로 변수 숫자 지정후, 토글클라스로"비지블" 쓸거공~! i가 10보다 크면 보여줘라

11로 해놨기때문에 보여지고 2로 바꾸면 안보여지는 놀라운 효과! -> 뭔가 자주 써먹을거같기둥? 물론 아직 어떻게 응용하는지는 잘 모룬당헤헷

classList :add(...변수명) / classList :remove(...변수명)

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
// <div class="anotherclass foo bar"></div> 이렇게 찍힘
console.log(div.outerHTML);

div.classList.remove(...cls);
//<div class="anotherclass"></div>
console.log(div.outerHTML);

정말 놀랍게도 불과 며칠전에 ...을 배웠는데 타노스가 내 기억을 날려버렸당(라고 쓰고 나는 핵똥멍충이 라고 읽는다..)

저렇게 콘솔에 찍어봤는데 설명하자면

cls 에 배열을 담고, classList.add + ...을 사용헤 추가하면 foo클라스 bar클래스가 추가가 된다!! 증말 신기하당!!!

물론 리무브도 같음!!

classList :replace("교체하고 싶은 클래스 명" , "교체할클래스명")

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
console.log(div.outerHTML);

이건 콘솔찍어도 오잉? 내가 제대로 이해한게 맞나? 해서 구글링해서 이해했다. 

foo클래스는 bar 클래스로 교체한다는 뜻!!! 이렇게 또 배워갑니다 총총쓰..