자바스크립트 DOM 조작과 이벤트 처리 기초 예제 완벽 정리

Posted on by steve

 

자바스크립트 DOM 조작과 이벤트 처리 기초 완벽 정복! 마우스 클릭 한 번으로 웹페이지가 살아 움직이는 원리가 궁금하셨나요? 요소 선택부터 동적 태그 추가, 이벤트 리스너와 이벤트 위임까지 핵심 기초 예제로 알기 쉽게 풀어드립니다. 이 글을 끝까지 읽으시면 누구나 손쉽게 반응형 인터랙티브 웹 요소를 직접 만드실 수 있어요!

 

웹 프로그래밍을 처음 배울 때 HTML로 화면의 뼈대를 세우고 CSS로 알록달록 색칠했던 순간, 다들 기억하시나요? 하지만 마우스로 버튼을 아무리 꾹꾹 눌러봐도 화면이 벽돌처럼 꿈쩍도 하지 않아서 허무했던 경험, 저 역시 개발 입문 시절에 똑같이 겪었답니다. 도대체 버튼을 누르면 알림창이 부드럽게 나타나고, 입력한 글이 화면에 착착 추가되는 마법은 어떻게 만드는 걸까요? 😊

그 비밀의 열쇠가 바로 자바스크립트의 DOM(Document Object Model) 조작과 이벤트(Event) 처리에 있습니다. 브라우저가 화면을 그리는 지도를 이해하고, 사용자의 행동을 감지하는 귀를 달아주는 순간, 정적인 웹페이지는 비로소 살아 숨 쉬는 대화형 공간으로 변신하거든요. 오늘은 코딩 초보자분들도 부담 없이 이해할 수 있도록 필수 개념과 실전 예제를 친절하게 정리해 드릴게요!

 

1. DOM이란 무엇일까요? 웹 문서와의 첫 만남 🌳

‘문서 객체 모델’이라는 번역어는 솔직히 너무 딱딱하고 어렵게 느껴지죠. 쉽게 비유하자면, DOM은 웹 브라우저가 HTML 코드를 한 줄씩 읽은 뒤 자바스크립트가 요리하기 좋게 나무 모양의 계층 구조로 정리해 둔 ‘웹페이지의 신분증 지도’라고 생각하시면 됩니다.

우리가 작성한 HTML 태그들은 브라우저 안에서 각각 하나의 ‘객체(Node)’가 되어 거대한 부모-자식 트리 구조를 이룹니다. 최상단의 document 객체를 통해 HTML 내부의 제목, 단락, 이미지, 버튼 등 어떤 요소든 콕 집어서 찾아낼 수 있죠. 이때 화면 속 요소를 선택하는 대표적인 탐색 메서드 3가지를 꼭 기억해 두셔야 해요.

  • document.getElementById(‘아이디명’): 특정 id 속성을 가진 유일한 요소를 가장 빠르고 정확하게 찾아옵니다.
  • document.querySelector(‘CSS선택자’): CSS에서 쓰던 선택자 문법(.클래스명, #아이디, 태그명) 그대로 가장 먼저 발견되는 요소 하나를 선택합니다.
  • document.querySelectorAll(‘CSS선택자’): 지정한 선택자와 일치하는 모든 요소를 한꺼번에 찾아 배열과 유사한 NodeList 형태로 묶어 반환합니다.
💡 알아두세요! querySelector를 더 추천하는 이유
과거에는 getElementById나 getElementsByClassName을 혼용해서 썼지만, 모던 자바스크립트 개발 환경에서는 CSS 문법을 그대로 재사용할 수 있는 querySelector가 훨씬 직관적이고 유연합니다. 실무 코드의 가독성을 높이고 싶다면 querySelector에 먼저 익숙해지시는 것을 강력히 추천드려요!

 

2. 요소를 내 마음대로 바꾸는 핵심 DOM 조작 3대장 🛠️

원하는 HTML 요소를 찾아내는 데 성공했다면, 이제 자바스크립트의 진짜 매력인 ‘내용 바꾸기’, ‘디자인 입히기’, ‘속성 제어하기’를 시작할 차례입니다. 화면을 새로고침하지 않고도 실시간으로 정보를 교체할 수 있거든요.

가장 먼저 텍스트를 바꿀 때는 textContent를 사용합니다. 화면의 글자만 깔끔하게 교체해 주죠. 반면 태그까지 포함해 구조를 변경하고 싶다면 innerHTML을 활용할 수 있습니다. 또한 디자인을 변경할 때는 style 속성을 직접 건드리거나, CSS 클래스를 붙였다 뗐다 할 수 있는 classList(add, remove, toggle)를 적극적으로 활용합니다.

자주 쓰이는 DOM 조작 속성 및 메서드 비교표

조작 대상 사용 속성 / 메서드 주요 동작 및 특징 실무 권장 방식
텍스트 변경 element.textContent 순수 문자열만 안전하게 삽입 및 수정 보안상 기본 텍스트 출력 시 최우선 사용
HTML 태그 삽입 element.innerHTML 문자열 내의 HTML 마크업 태그를 직접 렌더링 사용자 입력값 삽입 시 지양 (XSS 주의)
스타일 제어 element.style.속성명 인라인 스타일을 즉시 주입 (예: color, display) 동적 좌표 계산 등 특수 상황에만 제한적 사용
클래스 토글 element.classList add(), remove(), toggle()로 CSS 클래스 제어 스타일 분리를 위한 업계 표준 권장 방식
⚠️ 주의하세요! innerHTML의 보안 함정 (XSS 공격)
게시판 댓글이나 검색창처럼 사용자가 직접 입력한 문자열을 innerHTML로 그대로 화면에 렌더링하면, 악성 스크립트가 실행되는 크로스 사이트 스크립팅(XSS) 취약점이 발생할 수 있습니다. 단순 글자 표기에는 반드시 안전한 textContent를 사용하세요!

 

3. 클릭하면 반응하는 인터랙티브 웹! 이벤트 처리 기초 ⚡

웹페이지가 똑똑해지는 진짜 비결은 바로 ‘이벤트(Event)’에 있습니다. 이벤트란 사용자가 마우스를 클릭하거나, 키보드를 두드리거나, 스크롤을 내리는 등의 모든 상호작용 신호를 의미해요.

자바스크립트에서는 이러한 사용자 행동을 감시하다가, 특정한 사건이 터졌을 때 약속된 함수를 실행하도록 설정하는 addEventListener 메서드를 사용합니다. 마치 문 앞에 초인종 센서를 달아두는 것과 같죠.

📝 이벤트 리스너 표준 등록 공식

선택한요소.addEventListener(‘이벤트타입’, 실행할함수);

이벤트 타입 자리에는 ‘click'(클릭), ‘input'(텍스트 입력), ‘change'(선택 변경), ‘submit'(양식 제출) 등이 들어갈 수 있습니다. 아래에서 사용자가 선택한 스타일과 문구를 화면에 실시간으로 반영하는 인터랙티브 도구를 직접 체험해 보세요!

🔢 실시간 DOM 조작 & 스타일러 체험기

원하는 스타일:

출력할 문구:

 

4. 실전 예시: 동적으로 할 일 목록(To-Do) 생성하기 📋

기존에 이미 만들어진 태그의 내용만 바꾸는 것뿐만 아니라, 사용자의 요청에 따라 새로운 HTML 요소를 생성하고 삭제하는 작업 역시 실무 웹 프로그래밍의 정수입니다. 할 일 관리 앱이나 장바구니 리스트가 모두 이 방식으로 동작하거든요.

새 요소를 만들 때는 document.createElement('태그명')을 쓰고, 만든 요소를 실제 화면 속 부모 태그에 자식으로 이어 붙일 때는 부모요소.appendChild(새요소)를 호출합니다. 필요 없어진 요소는 요소.remove() 한 줄이면 깨끗하게 지울 수 있어요.

초보 개발자 민수 씨의 투두리스트 구현 과정 📝

  • 구현 목표: 입력창에 ‘자바스크립트 복습하기’를 쓰고 등록 버튼을 누르면 목록에 즉시 추가하기
  • 사용 핵심 메서드: createElement(‘li’), textContent, appendChild()

단계별 스크립트 실행 절차

1) 첫 번째 단계: const newLi = document.createElement('li'); 로 메모리상에 빈 리스트 태그 생성

2) 두 번째 단계: newLi.textContent = input.value; 로 사용자가 입력한 할 일 텍스트를 주입

3) 세 번째 단계: todoList.appendChild(newLi); 로 화면의 <ul> 부모 태그 안으로 착 달라붙게 조립

동작 완료 결과

– 결과 1: 전체 페이지 새로고침 없이 0.01초 만에 새로운 할 일 항목이 목록 맨 끝에 추가됨

– 결과 2: 입력창을 초기화(input.value = ”)하여 다음 입력을 깔끔하게 대기

어때요, 생각보다 흐름이 명확하죠? ‘태그를 만들고(create) ➔ 알맹이를 채우고(fill) ➔ 제자리에 붙인다(append)’는 3단계 공식만 머릿속에 기억해 두시면, 무한 스크롤 피드나 동적 댓글창도 얼마든지 직접 만드실 수 있습니다.

 

5. 이벤트 버블링과 위임, 이것만 알아도 레벨업! 🚀

자바스크립트를 처음 배울 때 누구나 한 번쯤 마주치는 미스터리한 버그가 있습니다. 바로 “처음 HTML에 있던 버튼은 클릭이 잘 되는데, 스크립트로 새로 추가한 목록의 삭제 버튼은 왜 클릭 이벤트가 안 먹힐까요?“라는 의문이에요.

그 이유는 자바스크립트가 처음 실행되던 시점에는 그 새로운 버튼이 아직 세상에 태어나지 않았기 때문입니다. 이때 수백 개의 버튼마다 일일이 새 이벤트를 걸어주면 코드도 지저분해지고 브라우저 메모리도 낭비되는데요. 이 문제를 깔끔하게 해결해 주는 멋진 패턴이 바로 ‘이벤트 위임(Event Delegation)’입니다.

📌 알아두세요! 이벤트 버블링(Bubbling)과 위임의 원리
자식 요소에서 발생한 이벤트는 물속의 거품처럼 부모 태그, 그 위의 조상 태그로 타고 올라가는 이벤트 버블링 특성을 가집니다. 따라서 자식마다 리스너를 달지 않고, 상위 부모 요소(<ul>) 하나에만 이벤트를 달아둔 뒤 event.target을 확인하여 실제 클릭된 버튼만 감지해 내면 새롭게 추가되는 모든 자식 요소도 문제없이 제어할 수 있습니다!

 

마무리: 핵심 내용 요약 📝

오늘 함께 살펴본 자바스크립트 DOM 조작과 이벤트 처리의 핵심 내용을 마지막으로 깔끔하게 총정리해 볼까요?

  1. DOM 탐색: 유연하고 강력한 CSS 선택자 기반의 querySelector 및 querySelectorAll을 우선적으로 활용합니다.
  2. 안전한 내용 변경: 태그 없는 텍스트 삽입 시에는 보안상 위험한 innerHTML 대신 textContent를 사용하는 습관을 들입니다.
  3. 스타일 분리 원칙: 자바스크립트 안에서 직접 색상 코드를 주입하기보다는 CSS 클래스를 미리 작성해 두고 classList.toggle()로 제어합니다.
  4. 동적 요소 제어: createElement와 appendChild로 요소를 실시간 생성하고, 늘어나는 자식 요소의 이벤트는 부모에게 맡기는 이벤트 위임을 적용합니다.
💡

자바스크립트 DOM & 이벤트 핵심 치트키

✨ 탐색 공식: document.querySelector(‘선택자’) 하나로 CSS 문법처럼 자유롭게 탐색하세요!
🛡️ 보안 원칙: 텍스트는 textContent, 스타일은 classList.toggle()을 애용하세요.
⚡ 상호작용 공식:

이벤트 처리 = 대상요소.addEventListener(‘이벤트종류’, 콜백함수)

🚀 성능 최적화: 동적으로 늘어나는 자식 요소들은 부모 태그에 위임하는 이벤트 위임 패턴으로 단번에 해결하세요!

DOM과 이벤트는 리액트(React)와 뷰(Vue) 등 모던 프레임워크 학습의 든든한 초석이 됩니다.

자주 묻는 질문 ❓

Q: querySelector와 getElementById 중 실무에서는 어떤 것을 더 추천하나요?
A: 일반적인 웹 프로젝트에서는 CSS 선택자를 그대로 재사용할 수 있는 querySelector를 가장 많이 추천합니다. 코드가 훨씬 직관적이기 때문이에요. 다만 수만 번 반복 실행되어야 하는 고성능 루프에서는 getElementById가 미세하게 더 빠를 수 있습니다.

Q: innerHTML과 textContent의 가장 결정적인 차이는 무엇인가요?
A: textContent는 순수한 문자열만 그대로 출력하는 반면, innerHTML은 문자열 안의 <strong>, <span> 같은 HTML 마크업 태그를 실제 요소로 해석하여 렌더링합니다. 보안 취약점(XSS) 방지를 위해 일반 텍스트는 항상 textContent를 쓰는 것이 원칙입니다.

Q: addEventListener 대신 태그 안에 onclick 속성을 쓰면 왜 안 되나요?
A: HTML 태그에 onclick=”func()” 형태로 작성하는 인라인 방식은 HTML과 자바스크립트 코드의 분리 원칙에 위배됩니다. 또한 같은 요소에 여러 개의 독립적인 이벤트 리스너를 중복 등록할 수 없기 때문에 실무에서는 반드시 addEventListener를 사용합니다.

Q: 자바스크립트 코드를 실행했는데 ‘Cannot read properties of null’ 에러가 떠요.
A: 브라우저가 HTML 태그를 아직 다 읽지도 않았는데 자바스크립트가 먼저 실행되어 요소를 찾지 못했을 때 발생하는 에러입니다. <script> 태그에 defer 속성을 부여하거나, HTML 문서 맨 하단 </body> 바로 직전에 스크립트를 배치하시면 말끔히 해결됩니다.

Q: 새로고침 없이 스크립트로 추가한 동적 버튼에 클릭 이벤트가 동작하지 않아요.
A: 새로 생성된 자식 요소 대신, 항상 화면에 존재하는 상위 부모 요소에 addEventListener를 걸어주는 ‘이벤트 위임(Event Delegation)’ 기법을 사용해 보세요. event.target을 통해 클릭된 버튼을 가려내면 동적 요소도 정상적으로 반응합니다.

웹 개발의 첫 단추인 DOM 조작과 이벤트 리스너를 탄탄히 다져두시면, 훗날 리액트(React)나 뷰(Vue) 같은 모던 프레임워크를 배울 때도 내부 동작 원리를 훨씬 깊이 있게 이해하실 수 있습니다. 브라우저의 개발자 도구(F12) 콘솔 창을 열어 오늘 소개해 드린 기초 예제들을 한 줄씩 직접 입력해 보시길 권해드려요. 코드를 치며 화면이 변하는 재미를 맛보시다 보면 어느새 웹 프로그래밍이 부쩍 친근하게 느껴지실 거예요! 글을 읽으시면서 궁금한 점이나 막히는 부분이 있다면 언제든지 댓글로 편하게 물어봐주세요~ 😊