JS - DOM 클래스 다루기 및 컨텐츠 생성

ClassList add, remove

const link = document.querySelector('.test');
link.classList.add('special');
setTimeout(() => {
    link.classList.remove('special');
}, 2000);

console.log(link.classList.contains('special'));

우리가 클래스를 html 태그에 설정해줄때 한개 이상의 클래스를 설정할 경우가 있다
예)

이러한 여러가지 클래스를 자바스크립트를 통해 내가 추가할 수 있고 삭제할 수가 있다.
classList를 사용하여 add는 추가 remove는 삭제이며 css파일에서 특정 클래스 이름으로 값을 설정하고 classList를 사용해 클래스를 추가 할 때만 그 값이 들어가게끔 해 줄 수가 있다.

innerHTML, appendChild

const lichild = document.createElement('li'); 
const ulmom = document.querySelector('.ulmom'); 
lichild.innerHTML = '<span>li 추가 성공</span>'; 
ulmom.appendChild(lichild);

부모 자식의 관계를 사용하여 부모 밑에 새로운 자식을 추가한 코드이다.
createElement로 li라는 만들려고하는 태그를 lichild 변수에 연결 시킨 뒤
innerHTML로 span을 추가한다 하지만 여기서 console.log를 출력하면 값은 나오지만
아직 html에 연결이 안되어 있기 때문에 부모태그인 ul태그를 변수에 연결해주고
그 해당 변수 ulmom을 appendChild 메소드를 사용하여 추가할 lichild 변수를 집어 넣으면 된다.

Event

자바스크립트의 수많은 기능중 가장 대단하다고 생각하는 것은 document로 web에 존재해 있는
파일을 살아있는 것처럼 여러가지 이벤트를 일으킬수 있다는 것이다.
이벤트는 클릭 드래그 화면크기조절 롱클릭 더블클릭 ... 등등 수많은 이벤트가 있고
그 중에 간단한 버튼 클릭으로 이벤트를 확인해보자 또한 예제를 통해 활용하자

const btn = document.querySelector('.btn');
const mainTitle = document.querySelector('.main-title');

// btn.onclick = btnClickHandler;
btn.addEventListener('click', btnClickHandler);

function btnClickHandler () {
    mainTitle.classList.add('special');
}

html에 btn이라는 클래스이름으로 button을 만들고 main-title이라는 태그를 만든 뒤 코드이다
함수를 만들어 그 함수가 실행될때마다 special이라는 클래스를 mainTitle변수에 연결된
클래스에 넣어준 뒤 그 함수를 버튼을 클릭했을때 실행되게끔 했다.
또한 주석처리가 된 btn.onclick = btnClickHandler; 의 경우로 사용이 가능하다
하지만 이 경우는 .onclick이라는 메소드를 사용하여 btnClickHandler 함수를 직접적으로 넣어
사용하는 것이기 때문에 addEventListener 보다 효율이 떨어지며 addEventListener는
보다 더 많은 기능을 가지고있어 주로 사용한다.
하지만 이벤트 리스너를 지정하는 요소가 많으면 많을수록 페이지의 실행 속도는 느려진다.
기본적으로 이벤트는 버블링 방식으로 사용이 되며 버블링 방식은 부모까지 이벤트가 전파 되기에
자식 요소를 포함할 수 있는 요소에 이벤트 핸들러를 지정하고
event 객체에 target 속성을 이용하여 정확히 어떤 요소에서 이벤트가 발생했는지 판단하면 된다
즉 이벤트 위임을 통해 코드를 간편하게 관리할 수가 있다.
이건 다음시간에 ...

Event 예제

그러면 이벤트를 사용한 아주 간단한 예제를 확인해보자.

1~3번까지 3개의 버튼이 있고 각 버튼을 누를때마다 눌린 버튼의 색상이 orange 색상으로 바뀌며
다시 다른 튼을 눌렀을때 orange 배경색상 이었던 버튼은 원래 색상으로 돌아오는 코드를 작성해보자.

let currentMenu;
const menulinks = document.querySelectorAll('.menu-link');
function clickMenuHandler(){
    //1번째 방법
    // for(let i=0; i<menulinks.length; i++){
    //     menulinks[i].classList.remove('menu-active');
    // }

    //2번째 방법
    // const activeMenu = document.querySelector('.menu-active');
    //
    //
    // if(activeMenu){
    //     activeMenu.classList.remove('menu-active');
    // }
    if(currentMenu){
        currentMenu.classList.remove('menu-active');
    }
    this.classList.add('menu-active');
    currentMenu = this;
}

for(let i=0; i<menulinks.length; i++){
    menulinks[i].addEventListener('click', clickMenuHandler);
}

주석처리가 되지 않은 코드가 최종 코드이다.
총 3가지의 방법이 있으며 html과 css의 코드는 생략하도록 한다.
공통적으로는 당연히 3개의 버튼 클래스이름을 menulinks라는 변수에 querySelectorAll로 담아낸다
또한 for문을 사용하여 배열의 인덱스 마다 clickMenuHandler라는 함수를 클릭시에 호출 해준다

이제 그 함수를 설정해야하는데
우리가 원하는 것은 눌린버튼이 색상이 바뀐 뒤 다른 버튼을 눌렀을때 바뀌었던 버튼은 다시 원래의 색상으로 돌아가게끔 하는것이다.
방법이 총 3가지로 구성했으며 1~2번째 방법은 let currentMenu를 주석처리 한 뒤 확인하자.

---

첫번째는 for문을 이용하여 menu-active를 배열 인덱스를 받아 없애준다.

두번째는 activeMenu라는 색상이 바뀌는 클래스가 들어간 변수를 연결해주고 그 연결된 변수를 if문을 활용해 activeMenu가 null이 아니라 값이 있을때 삭제해주는 식으로 된다. 하지만 이러한 dom script는 파일을 다 뒤져서 찾아내야하기 때문에 큰 프로젝트일 경우에는 느릴 수 있다.

세번째는 현재 색상이 들어가 있는 즉 활성화된 버튼을 담을 변수를 전역변수로 설정한 뒤 if문을 걸어 삭제하는 방식이다.

---

이렇게 간단하지만 javascirpt를 활용하여 dom구조에서 클래스를 넣고 빼고
불러오고 새로운 이벤트를 추가 시키는 기능을 확인해봤다.