js바닐라 클래스리스트 토글

엘리먼트를 조작하는 방법 중에,
클래스리스트를 통해서

일단은,,
css를 통해서 먼저 클래스 조건을 설정하고
효과를 설정한다음

클래스리스트 토글을 해서
클래스가 있을땐 효과가 적용되고,
없을땐 효과가 없어지는
그런 기능을 구현할수있다.

=========================================
참고사이트
https://opentutorials.org/course/1375/6682

==========================================
구현코드

var a = document.createElement('div');
a.classList="goo";
a.classList="goo1";
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc'); //있으면 없애고 없으면 만든다
a.classList.add("aa");
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.classList.toggle('abc');
a.innerHTML="aa";
document.body.appendChild(a);

var b=document.createElement('p');
b.innerHTML='bb';
b.className="goo-1";
a.appendChild(b);

var c=document.createElement('p');
c.innerHTML='cc';
c.classList="goo-2";
a.appendChild(c);

console.log(a.outerHTML);
console.log(a.classList.length);