DOM 조작과 이벤트 처리 기초

우리는 지금까지 자바스크립트 기본 문법, 데이터 저장/조작, 흐름 제어를 학습했습니다.

이제는 이 지식을 바탕으로 웹 페이지와 직접 상호작용하는 단계로 넘어갑니다.

이를 가능하게 하는 핵심이 DOM(Document Object Model) 조작과 이벤트 처리입니다.

이번 장에서는 두 개념을 통해 정적 페이지에 동작과 반응을 추가하는 기본 흐름을 정리합니다.

DOM 조작: 웹 페이지의 요소 다루기

웹 브라우저가 HTML 문서를 로드하면, 그 문서는 객체 형태로 구조화되어 메모리에 저장됩니다.

이것이 바로 DOM(Document Object Model)입니다.

DOM은 HTML 문서의 각 요소를 객체(노드)로 표현하고, 이 객체들을 트리(tree) 구조로 연결합니다.

자바스크립트는 이 DOM을 이용하여 HTML 요소의 내용, 스타일, 속성 등을 읽고 변경하며, 새로운 요소를 추가하거나 기존 요소를 삭제할 수 있습니다.

요소 선택하기: 조작의 첫걸음

어떤 HTML 요소를 조작하려면, 먼저 해당 요소를 자바스크립트 코드 내에서 선택해야 합니다. 아래 HTML과 JavaScript는 짝으로 실행합니다. JavaScript를 실행할 때 대상 요소가 이미 파싱되어 있어야 하므로 인라인 스크립트는 대상 요소 뒤에 두거나, 외부 script.js는 <script src="script.js" defer></script>로 연결하세요. 존재하지 않는 id·선택자로 단일 요소를 찾으면 null이므로 그대로 textContent 등을 사용하면 오류가 납니다.

요소를 선택하는 다양한 방법이 있습니다.

<h1 id="mainTitle">안녕하세요, DOM 조작!</h1>

// script.js (HTML 파일에 연결된 자바스크립트 파일)
const titleElement = document.getElementById('mainTitle');
console.log(titleElement); // <h1 id="mainTitle">...</h1> 요소 객체가 출력됩니다.

<p class="greeting">반갑습니다.</p>
<div id="container">
    <span class="text">첫 번째 텍스트</span>
    <span class="text">두 번째 텍스트</span>
</div>

const firstParagraph = document.querySelector('p');    // 첫 번째 <p> 태그
const greetingText = document.querySelector('.greeting'); // class가 greeting인 첫 번째 요소
const containerDiv = document.querySelector('#container'); // id가 container인 요소
const firstSpan = document.querySelector('#container .text'); // container 내부의 첫 번째 class="text" span

console.log(firstParagraph);
console.log(greetingText);
console.log(containerDiv);
console.log(firstSpan);

const allSpansInContainer = document.querySelectorAll('#container .text');
console.log(allSpansInContainer); // NodeList(2) [span.text, span.text]

allSpansInContainer.forEach(span => {
    console.log(span.textContent);
});
// 결과:
// 첫 번째 텍스트
// 두 번째 텍스트

요소 내용 조작하기

선택한 요소의 텍스트 내용이나 HTML 내용을 변경할 수 있습니다.

• element.textContent: 요소 내부의 텍스트 콘텐츠를 가져오거나 설정합니다. HTML 태그는 순수한 텍스트로 처리됩니다.
• element.innerHTML: 요소 내부의 HTML 콘텐츠를 가져오거나 설정합니다. HTML 태그가 포함된 문자열을 할당하면 브라우저가 이를 HTML로 파싱하여 렌더링합니다.

  <p id="myParagraph">원래 텍스트</p>
  <div id="myDiv"></div>

  const paragraph = document.getElementById('myParagraph');
  const myDiv = document.getElementById('myDiv');
  // textContent 변경
  paragraph.textContent = "새로운 텍스트입니다!";
  console.log(paragraph.textContent); // 결과: 새로운 텍스트입니다!
  // innerHTML 변경 (HTML 태그 포함)
  myDiv.innerHTML = "<h2>새로운 제목</h2><p>이것은 <b>HTML</b>입니다.</p>";

  innerHTML은 편리하지만, 사용자 입력을 그대로 innerHTML에 넣는 것은 보안상 취약점(XSS 공격)을 야기할 수 있으므로 주의해야 합니다.

순수한 텍스트만 변경할 때는 textContent를 사용합니다. 요소에 값을 대입하면 그 안의 기존 자식 요소도 텍스트로 교체됩니다. 입력 문자열에 태그처럼 보이는 내용이 있더라도 마크업으로 실행하지 않게 할 수 있습니다.

요소 속성(Attribute) 조작하기

HTML 요소의 속성(예: src, href, class, id 등)을 가져오거나 설정할 수 있습니다.

• element.getAttribute('속성명'): 특정 속성의 값을 가져옵니다.
• element.setAttribute('속성명', '값'): 특정 속성의 값을 설정합니다.
• element.removeAttribute('속성명'): 특정 속성을 제거합니다.

  <img id="myImage" src="image1.jpg" alt="첫 번째 이미지">
  <a id="myLink" href="https://www.google.com">Google로 이동</a>

  const image = document.getElementById('myImage');
  const link = document.getElementById('myLink');
  // src 속성 값 가져오기
  console.log(image.getAttribute('src')); // 결과: image1.jpg
  // src 속성 값 변경
  image.setAttribute('src', 'image2.png');
  image.setAttribute('alt', '두 번째 이미지');
  // href 속성 값 변경
  link.setAttribute('href', 'https://www.naver.com');
  link.textContent = "Naver로 이동"; // 링크 텍스트도 변경
  // class 속성 추가/제거 (class는 특별히 classList 메서드를 주로 사용)
  // image.removeAttribute('alt'); // alt 속성 제거

요소의 class 속성은 스타일링에 매우 중요하며, 자바스크립트에서는 classList 속성을 통해 편리하게 조작할 수 있습니다.

• element.classList.add('클래스명')
• element.classList.remove('클래스명')
• element.classList.toggle('클래스명') (있으면 제거, 없으면 추가)
• element.classList.contains('클래스명') (해당 클래스가 있는지 확인, 불리언 반환)

  <button id="myButton" class="btn">클릭하세요</button>

  /* style.css */
  .btn {
      padding: 10px 20px;
      background-color: blue;
      color: white;
  }
  .active {
      background-color: green;
      font-weight: bold;
  }

  const button = document.getElementById('myButton');
  button.classList.add('active');    // 'active' 클래스 추가
  console.log(button.className);     // 결과: "btn active"
  button.classList.remove('btn');    // 'btn' 클래스 제거
  console.log(button.className);     // 결과: "active"
  button.classList.toggle('active'); // 'active' 클래스 제거
  console.log(button.className);     // 결과: ""
  button.classList.toggle('active'); // 'active' 클래스 다시 추가
  console.log(button.classList.contains('active')); // 결과: true

요소 스타일(CSS) 조작하기

자바스크립트로 직접 요소의 CSS 스타일을 변경할 수 있습니다.

element.style.속성명 형식으로 접근합니다.

CSS 속성 이름이 하이픈(-)으로 연결되어 있다면, 자바스크립트에서는 카멜 케이스(camelCase)로 변환하여 사용해야 합니다.

<p id="styledParagraph">이 문단은 스타일이 바뀔 것입니다.</p>

const styledParagraph = document.getElementById('styledParagraph');

styledParagraph.style.color = 'red';        // 글자색 변경
styledParagraph.style.fontSize = '20px';    // 글자 크기 변경
styledParagraph.style.backgroundColor = 'lightgray'; // 배경색 변경 (CSS: background-color)

element.style은 이 예제처럼 직접 지정한 인라인 스타일을 다룹니다. CSS 파일의 모든 계산 결과를 읽어 오는 속성은 아닙니다. 여러 속성으로 이루어진 상태를 바꾸려면 CSS 규칙을 작성하고 클래스를 토글하면 관리하기 쉽습니다. 클래스 이름만 추가해도 새 CSS 규칙이 생기는 것은 아닙니다.

새로운 요소 생성 및 추가/제거하기

DOM API를 사용하여 완전히 새로운 HTML 요소를 생성하고, 문서에 추가하거나 제거할 수 있습니다.

• document.createElement('태그명'): 새로운 HTML 요소를 생성합니다.
• 부모요소.appendChild(자식요소): 부모 요소의 자식으로 요소를 맨 뒤에 추가합니다.
• 부모요소.removeChild(자식요소): 부모 요소에서 특정 자식 요소를 제거합니다.

  <ul id="myList">
      <li>기존 아이템 1</li>
      <li>기존 아이템 2</li>
  </ul>

  const myList = document.getElementById('myList');
  // 새로운 li 요소 생성
  const newItem = document.createElement('li');
  newItem.textContent = "새로운 아이템 3";
  newItem.style.color = "purple"; // 생성된 요소에 스타일 적용
  // ul에 li 추가
  myList.appendChild(newItem);
  // 결과: <ul>...<li>새로운 아이템 3</li></ul>
  // 마지막 아이템 제거
  const lastChild = myList.lastElementChild; // 마지막 자식 요소 선택
  if (lastChild) {
      myList.removeChild(lastChild);
  }
  // 결과: <ul><li>기존 아이템 1</li><li>기존 아이템 2</li></ul> (새로운 아이템 3은 사라짐)

이벤트 처리: 사용자 상호작용에 반응하기

앞의 요소 추가·제거 코드를 한 번에 실행하면 마지막에 새 항목까지 제거되어 기존 두 항목만 남습니다. 추가된 모습을 따로 보려면 appendChild까지 실행해 확인한 뒤 제거 부분을 실행하세요. 아래 이벤트 예제는 같은 버튼에 리스너가 누적될 수 있으므로 서로 다른 예제는 새 페이지에서 실행합니다.

이벤트(Event)는 웹 페이지에서 발생하는 모든 종류의 사건을 의미합니다.

예를 들어, 사용자가 버튼을 클릭하는 것, 키보드를 누르는 것, 마우스를 움직이는 것, 페이지 로딩이 완료되는 것 등 모든 것이 이벤트입니다.

이벤트 처리(Event Handling)는 이러한 이벤트가 발생했을 때 특정 자바스크립트 코드를 실행하도록 하는 메커니즘입니다.

이벤트 리스너 등록하기

요소에 이벤트를 감지하고 처리하는 함수(이벤트 핸들러)를 연결하는 가장 일반적이고 권장되는 방법은 addEventListener() 메서드를 사용하는 것입니다.

// element.addEventListener('이벤트_타입', 함수);

• 이벤트_타입: 발생할 이벤트의 종류를 나타내는 문자열입니다. (예: 'click', 'mouseover', 'keydown', 'submit', 'load')
• 함수: 이벤트가 발생했을 때 실행될 코드 블록을 포함하는 함수(이벤트 핸들러)입니다.

  <button id="clickMeBtn">여기를 클릭하세요</button>
  <input type="text" id="myInput" placeholder="여기에 입력하세요">

  const clickButton = document.getElementById('clickMeBtn');
  const myInput = document.getElementById('myInput');
  // 1. 클릭 이벤트 (click)
  clickButton.addEventListener('click', function() {
      alert("버튼이 클릭되었습니다!");
  });
  // 2. 입력 이벤트 (input)
  myInput.addEventListener('input', function() {
      console.log("현재 입력 값:", myInput.value);
  });
  // 3. 마우스 오버 이벤트 (mouseover)
  clickButton.addEventListener('mouseover', function() {
      this.style.backgroundColor = 'lightgreen'; // 일반 함수 리스너의 this는 보통 currentTarget과 같습니다.
  });
  // 4. 마우스 아웃 이벤트 (mouseout)
  clickButton.addEventListener('mouseout', function() {
      this.style.backgroundColor = ''; // 원래대로 (또는 특정 색상)
  });

이벤트 핸들러 함수는 종종 event 객체(관례적으로 e나 event로 명명)를 인자로 받습니다.

이 event 객체는 발생한 이벤트에 대한 자세한 정보를 담고 있습니다.

myInput.addEventListener('keydown', function(e) {
    console.log("키가 눌렸습니다. 눌린 키:", e.key); // 눌린 키 문자열
    console.log("키 코드:", e.keyCode); // 눌린 키의 숫자 코드 (구식)
    if (e.key === 'Enter') {
        alert("Enter 키를 누르셨군요!");
    }
});

// 링크 기본 동작 방지 예시
const preventLink = document.getElementById('myLink');
preventLink.addEventListener('click', function(e) {
    e.preventDefault(); // 링크의 기본 동작(페이지 이동)을 막습니다.
    console.log("링크 클릭! 하지만 페이지 이동은 막았습니다.");
});

• e.target: 이벤트가 실제로 발생한 요소를 가리킵니다.
• e.currentTarget: 현재 실행 중인 리스너가 등록된 요소를 가리킵니다. 이벤트 위임에서는 target과 currentTarget이 서로 다를 수 있습니다.
• e.eventPhase: 현재 리스너가 캡처, 타깃, 버블 단계 중 어디에서 실행되는지 나타냅니다.
• e.preventDefault(): 특정 이벤트의 기본 동작(예: 링크 클릭 시 페이지 이동, 폼 제출 시 새로고침)을 막습니다. 단, 취소 가능한 이벤트에서만 의미가 있고 passive: true 리스너에서는 사용할 수 없습니다.
• e.stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 중단합니다. 같은 요소의 뒤쪽 리스너까지 막아야 한다면 stopImmediatePropagation()을 사용합니다.

일반 DOM에서 버블링하는 click은 캡처 → 타깃 → 버블의 경로로 전달됩니다. 모든 이벤트가 버블링하는 것은 아닙니다. 기본 동작은 이 전파의 고정된 네 번째 단계가 아니며 이벤트·요소별 규칙을 따릅니다. preventDefault()는 취소 가능한 기본 동작을 막는 제어이고, 이벤트 전파를 멈추는 제어와 구분해야 합니다.

대부분의 UI 코드는 버블 단계 리스너를 쓰지만, 바깥 클릭 감지나 문서 전체 감시처럼 먼저 확인해야 하는 작업은 { capture: true }를 선택할 수 있습니다.

이벤트 위임은 부모 요소의 리스너에서 실제 처리할 자식 대상을 찾는 방식입니다. e.target이 Element인지 확인한 뒤 closest('[data-action]')로 버튼 등을 찾을 수 있습니다. 일치하는 조상이 없으면 null입니다.

찾은 요소가 있고 e.currentTarget.contains(찾은요소)도 참일 때 처리하면 위임 영역 바깥의 조상을 잘못 선택하지 않게 됩니다. 그림에서 span은 클릭 시작점, ul은 리스너 등록점입니다. 버튼 안의 글자를 클릭해도 같은 버튼 동작으로 연결되는 이유를 화살표로 확인하세요.

이벤트 리스너 제거하기

removeEventListener() 메서드를 사용하여 등록했던 이벤트 리스너를 제거할 수 있습니다.

이는 특히 메모리 누수를 방지하거나, 특정 조건에서만 이벤트를 처리하고 싶을 때 유용합니다.

addEventListener()에 전달했던 것과 동일한 함수 참조를 사용해야 하며, 캡처 단계 리스너라면 capture 값도 맞춰야 합니다.

const onceButton = document.getElementById('clickMeBtn');

function clickHandler() {
    alert("한 번만 실행됩니다!");
    onceButton.removeEventListener('click', clickHandler); // 함수 실행 후 리스너 제거
}

onceButton.addEventListener('click', clickHandler);

한 번만 실행하면 되는 리스너는 직접 제거하는 대신 { once: true } 옵션을 사용할 수 있습니다.

onceButton.addEventListener('click', () => {
    alert("한 번만 실행됩니다!");
}, { once: true });

여러 리스너를 한꺼번에 해제해야 한다면 AbortController의 signal을 공유하는 방식도 사용할 수 있습니다. 아래 handleResize는 먼저 정의해야 하는 함수 이름입니다. 예를 들어 앞에 다음 정의를 둡니다.

function handleResize() {
    console.log(window.innerWidth);
}

const controller = new AbortController();

window.addEventListener('resize', handleResize, {
    signal: controller.signal,
});

controller.abort(); // signal을 공유한 리스너 해제

위 예제는 등록 직후 controller.abort()를 실행하므로 그 뒤 창 크기를 바꾸어도 이 리스너는 실행되지 않습니다. 동작을 확인하려면 등록까지 먼저 실행하고 창 크기를 바꾼 뒤 마지막 해제 줄을 실행합니다. once도 그 리스너 하나의 수명만 정하며 같은 버튼의 다른 리스너까지 지우지는 않습니다.

자주 사용되는 이벤트 타입

몇 가지 일반적인 이벤트 타입을 정리해드립니다.

• 마우스 이벤트: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove
• 키보드 이벤트: 새 코드에서는 keydown, keyup 중심으로 처리합니다.
• 폼 이벤트: submit, focus, blur, change, input
• 한글/IME 입력 이벤트: compositionstart, compositionupdate, compositionend
• 문서/창 이벤트: load (페이지 로드 완료), DOMContentLoaded (DOM 트리 구성 완료), resize, scroll

DOM 조작과 이벤트 처리는 선택, 변경, 감지, 정리의 순서로 생각하면 안정적입니다.

사용자 입력이 화면 변경으로 이어질 때는 선택, 이벤트, 상태 읽기, 최소 DOM 갱신 순서를 함께 확인합니다.

작은 화면 동작을 완성해 보기

다음 전체 파일을 counter.html로 저장해 브라우저에서 여세요. 외부 이미지·라이브러리가 필요하지 않습니다. 버튼을 두 번 클릭하면 “2회”, 초기화하면 “0회”가 보입니다. 키보드로 버튼에 초점을 옮긴 뒤 Enter 또는 Space로도 확인해 보세요. 페이지를 다시 열면 이 예제의 상태는 0부터 시작합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>클릭 횟수</title>
</head>
<body>
  <p id="countResult" aria-live="polite">0회</p>
  <button id="increaseCount" type="button">횟수 늘리기</button>
  <button id="resetCount" type="button">초기화</button>
  <script>
    const result = document.getElementById("countResult");
    const increase = document.getElementById("increaseCount");
    const reset = document.getElementById("resetCount");
    let count = 0;
    function render() {
      result.textContent = `${count}회`;
    }
    increase.addEventListener("click", () => {
      count += 1;
      render();
    });
    reset.addEventListener("click", () => {
      count = 0;
      render();
    });
  </script>
</body>
</html>

스크립트가 두 버튼 뒤에 있으므로 조회 시 이미 존재합니다. 이벤트를 한 번 받을 때마다 변수 count를 바꾸고 render()로 해당 텍스트만 갱신합니다. render만 호출하면 횟수가 증가하지 않고, 변수만 바꾸면 화면 텍스트가 자동으로 바뀌지는 않습니다.

직접 풀어보기

위 파일을 바꾸어 최대 3회까지만 증가하게 하세요. 3회에서 증가 버튼을 비활성화하고 초기화 후에는 다시 사용할 수 있어야 합니다. 어떤 함수에 버튼 상태 갱신을 두면 두 리스너가 같은 규칙을 사용할 수 있을까요?

목록 규칙 확인: querySelectorAll의 정적 결과.

반복 실전 점검

이번 장에서는 자바스크립트로 웹 페이지를 동적으로 변경하는 DOM 조작과 이벤트 처리를 다뤘습니다.

DOM 조작에서는 요소 선택, 내용 변경(textContent, innerHTML), 속성 변경(setAttribute, classList), 스타일 변경(style)을 확인했습니다.

새 요소를 생성하고 추가하거나 제거하는 흐름도 함께 다뤘습니다.

이벤트 처리를 통해 사용자의 상호작용(클릭, 입력 등)에 반응하여 특정 자바스크립트 코드를 실행하는 방법을 배웠습니다.

addEventListener()를 사용하여 이벤트 리스너를 등록하고, event 객체를 통해 이벤트에 대한 상세 정보를 얻는 방법을 이해했습니다.

DOM 조작과 이벤트 처리는 정적인 HTML을 사용자 입력에 반응하는 화면으로 바꾸는 기본 도구입니다.

예제를 직접 바꿔 보며 어떤 이벤트가 어떤 요소와 상태를 바꾸는지 확인해 보세요.