JavaScript DOM 완벽가이드 - Part 1: DOM이란 무엇인가? (개념 이해)

JavaScript DOM 완벽 가이드: 웹페이지를 살아있게 만드는 기술

들어가며: 왜 DOM을 배워야 할까요?

지금까지 JavaScript의 기본 문법을 배웠습니다. 변수, 함수, 객체, 배열... 하지만 솔직히 말하면, 이것들만으로는 웹페이지를 움직이게 할 수 없습니다.

질문을 던져봅시다:

• 버튼을 클릭하면 텍스트가 바뀌게 하려면?
• 사용자가 입력한 값을 읽어오려면?
• 화면에 새로운 요소를 추가하려면?
• 스타일을 동적으로 바꾸려면?

답은 DOM입니다! DOM을 이해하지 못하면, JavaScript는 그저 콘솔에 로그만 찍는 언어로 끝나버립니다. DOM을 이해하면, 웹페이지를 살아있는 인터랙티브한 애플리케이션으로 만들 수 있습니다.

이제 DOM의 세계로 들어가 봅시다.

---

Part 1: DOM이란 무엇인가? (개념 이해)

DOM의 정의

DOM (Document Object Model) = 문서 객체 모델

쉽게 말하면:

• HTML 문서를 JavaScript가 이해하고 조작할 수 있는 객체 형태로 표현한 것
• 웹페이지의 구조화된 표현
• JavaScript와 HTML 사이의 다리 역할

왜 DOM이 필요한가?

문제 상황:

 

 

html

<!-- index.html -->
<h1>안녕하세요</h1>
<button>클릭</button>

이 HTML 파일을 JavaScript에서 어떻게 다룰 수 있을까요?

 

 

javascript

// ❌ 불가능
let html = "<h1>안녕하세요</h1><button>클릭</button>";
// 그냥 문자열일 뿐... 조작할 수 없음

// ✅ DOM을 통해 가능!
let heading = document.querySelector('h1');
heading.textContent = "안녕히가세요";  // 텍스트 변경!

핵심: HTML은 텍스트 파일입니다. 브라우저가 이를 읽어서 객체로 변환해야 JavaScript로 조작할 수 있습니다. 이 변환된 결과가 바로 DOM입니다.

실제 비유로 이해하기

집을 짓는 과정:

1. 설계도 (HTML)

 

 

html

   <div class="house">
     <div class="room">방</div>
     <div class="kitchen">부엌</div>
   </div>

1. 실제 집 (DOM)
   • 브라우저가 설계도를 보고 집을 짓습니다
   • 이제 집의 각 방에 접근하고 변경할 수 있습니다
2. 집 관리 (JavaScript)

 

 

javascript

   // 방의 색을 바꾸기
   document.querySelector('.room').style.color = 'blue';
   
   // 새 방 추가하기
   let newRoom = document.createElement('div');
   document.querySelector('.house').appendChild(newRoom);