document.querySelector("")와 classList 추가 제거 사용하기

자바스크립트를 통해서 HTML의 요소에 접근하고 이를 수정할 수 있다.
class를 추가하고 삭제하여 적용되는 CSS 속성도 변경할 수 있다.

.zombie {
  font-weight: bold;
}

• 위와 같은 CSS 파일이 있다고 하자.
  이 CSS 속성은 "zombie" 클래스의 글씨를 굵게 만든다.

    <div>
      <input type="text-area" id="input_text" placeholder="쓰세요">
      <button class="btn_press">누르세요</button>
    </div>

• 하지만 위의 HTML 파일을 보면, 그 어디에도 "zombie" 클래스는 없다.
• 만약 button에 "zombie" 클래스를 추가하고 싶은데,
  직접 HTML 파일을 수정하기 보다 버튼이 눌렸을 때,
  "zombie" 클래스가 추가가 되도록 만들자.

javascript

• 일단 button element에 접근해야 한다.
  이를 위해서

document.querySelector(".btn_press");

를 사용한다.

• 그리고 버튼이 눌렸을 때, 이벤트가 발생하도록 한다.

.addEventListener("click", function(event){ });

• 접근한 element의 classList에 "zombie"를 추가함으로써,
  CSS 파일의 속성이 button에 적용될 수 있도록 한다.

.classList.add("zombie");

const btn = document.querySelector(".btn_press");
console.log(btn);
// 출력되는 값은 <button class="btn_press">누르세요</button> 이다.

btn.addEventListener("click", function(event){
  btn.classList.add("zombie");
  console.log(btn);
  /*
  클릭 후 출력되는 값은 
  <button class="btn_press zombie">누르세요</button> 이다.
  */
});
/*
 위의 코드를 통해서 버튼을 클릭했을 때 
 "zombie" 클래스를 추가하고 추가된 클래스를 통해서
 기존에 있던 CSS 속성이 적용된다.
*/

• 추가한 "zombie" 클래스로 버튼을 클릭했을 때 버튼의 글씨가 굵어지는 것은 좋다.
  하지만, 영원히 변한 모양으로 있는 것도 어색한 일이니, 클릭 후 마우스가 움직이면 본래 굵기로 돌아가게 한다.

btn.addEventListener("mousemove", function(event){
  btn.classList.remove("zombie")
  console.log(btn);
  /*
  마우스를 움직이면 출력되는 값은 
  <button class="btn_press">누르세요</button> 이다.
  */
});
/*
 마우스가 움직였을 때, 버튼의 classList에서
 "zombie"를 제거함으로써 다시 처음의 버튼으로 돌아간다.
*/