[JavaScript] 이벤트 처리 및 DOM 조작

들어가기 앞서

사용자가 버튼을 클릭했을 때 화면이 바뀌고, 입력한 값을 실시간으로 반영하고, 슬라이드가 자동으로 넘어가는 기능은 전부 JavaScript 덕분이다.

이러한 기능을 가능하게 만드는 핵심 요소가 바로 DOM 조작과 이벤트 처리다.

만약 이 기능이 없다면 웹은 마치 전단지처럼 아무런 반응 없이 글자만 나열된 정적인 문서가 되고 만다.

지금 이 티스토리 또한 동적인 인터랙티브 웹을 지원하지 않기 때문에 정적인 문서에 속한다.

그렇다면 인터랙티브 웹으로 바꾸기 위해서 어떻게 이벤트를 활용해야 사용자와 상호작용할 수 있고, DOM 요소를 자바스크립트로 선택하고 변경할 수 있는지 알아보도록 하겠다.

DOM이란?

DOM은 The Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스다.

DOM은 HTML을 마치 트리처럼 구조화한 모델로, 각 태그는 나뭇가지처럼 연결된 노드(node)로 표현된다.

JavaScript는 이 트리에서 원하는 가지를 선택해 내용을 바꾸거나 색을 칠하거나 가지를 잘라내는 도구 역할을 한다.

즉, DOM에서는 자바스크립트를 이용해 HTML요소를 찾고, 수정하고, 삭제하고, 이벤트를 연결할 수 있게 해준다.

HTML 문서를 객체로 표현한 웹 문서의 구조화된 표현이란 소리다.

DOM에 대해 최신의 공식 명세를 확인하고 싶다면 DOM Standard을 참조하면 된다.

주요 DOM 요소

메서드	설명	예시
getElementById()	ID로 선택	document.getElementById("title")
querySelector()	CSS 선택자처럼 선택	document.querySelector(".box")
getElementsByClassName()	클래스로 선택 (HTMLCollection 반환)	document.getElementsByClassName("item")
querySelectorAll()	여러 요소 선택 (NodeList 반환)	document.querySelectorAll("ul li")

이 외에 다른 요소들을 확인하고 싶다면 역시나 DOM Standard에 들어가면 모든 요소들이 어떻게 사용하는지 설명까지 해주고 있으니 참고하면 된다.

요소의 내용 / 속성 / 스타일 변경하는 방법

선택한 요소는 다양한 방식으로 내용, 속성, 스타일을 바꿀 수 있다.

내용 바꾸기

document.getElementById("title").textContent = "변경됨!";

• innerText / textContent: 텍스트 변경
• innerHTML: HTML 태그 포함 변경

속성 바꾸기

document.querySelector("img").setAttribute("src", "new.jpg");

스타일 바꾸기

document.querySelector(".box").style.backgroundColor = "lightblue";

이벤트 연결하기

사용자와 상호작용이 발생했을때 지정한 JavaScript 코드가 실행되도록 이벤트를 등록해줘야 한다.

기본적인 형태는 아래와 같다.

element.addEventListener("이벤트종류", 함수);

버튼을 클릭했을때 이벤트가 발동하도록 하려면 아래와 같이 하면 된다.

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  alert("버튼이 클릭됨!");
});

이벤트 종류

이벤트 종류	설명
click	클릭할 때
mouseover	마우스를 올렸을 때
keydown	키를 눌렀을 때
input	입력 필드 값이 바뀔 때

전체 흐름 예시

<h2 id="msg">안녕하세요</h2>
<button id="btn">눌러봐요</button>

<script>
  const btn = document.getElementById("btn");
  const msg = document.getElementById("msg");

  btn.addEventListener("click", () => {
    msg.textContent = "반가워요!";
    msg.style.color = "tomato";
  });
</script>