#12 자바스크립트 DOM

DOM이란 무엇일까요?

DOM(Document Object Model)은 HTML, XML 문서에 접근하고 조작할 수 있도록 하는 프로그래밍 인터페이스입니다. 쉽게 말해, 웹 페이지를 구성하는 모든 요소들을 자바스크립트를 통해 다룰 수 있게 해주는 객체 모델이라고 생각하면 됩니다. DOM을 통해 우리는 웹 페이지의 내용을 동적으로 변경하고, 사용자와 상호작용하는 다양한 기능을 구현할 수 있습니다.

DOM 트리의 구조

DOM은 HTML 문서를 트리 구조로 표현합니다. HTML 태그들은 노드(Node)라고 불리는 객체로 표현되며, 이 노드들이 부모-자식 관계를 가지면서 트리를 형성합니다.

• 노드(Node): DOM에서 모든 요소의 기본 단위입니다.
• 요소 노드(Element Node): HTML 태그를 나타냅니다.
• 텍스트 노드(Text Node): 요소 내의 텍스트 내용을 나타냅니다.
• 속성 노드(Attribute Node): 요소의 속성을 나타냅니다.
• 문서 노드(Document Node): 전체 HTML 문서를 나타내는 루트 노드입니다.
• 주석 노드(Comment Node): HTML 주석을 나타냅니다.

DOM 트리 예시

 

<div id="container">
  <p>Hello, world!</p>
  <button>클릭</button>
</div>

 

 

위 HTML 코드를 DOM 트리로 표현하면 다음과 같습니다.

<div id="container"> (요소 노드)
  <p>Hello, world!</p> (요소 노드)
  <button>클릭</button> (요소 노드)
</div>

• div 요소는 루트 요소이며, p 요소와 button 요소의 부모 노드입니다.
• p 요소와 button 요소는 div 요소의 자식 노드입니다.
• "Hello, world!"는 p 요소의 자식 노드인 텍스트 노드입니다.
• id="container"는 div 요소의 속성 노드입니다.

자바스크립트를 이용한 DOM 조작

 

// 요소 선택하기
const myDiv = document.getElementById('container');
const paragraphs = document.getElementsByTagName('p');

// 요소의 내용 변경하기
myDiv.textContent = '변경된 내용';

// 새로운 요소 생성 및 추가하기
const newParagraph = document.createElement('p');
newParagraph.textContent = '새로운 단락';
myDiv.appendChild(newParagraph);

// 요소 스타일 변경하기
myDiv.style.backgroundColor = 'lightblue';

 

 

왜 DOM 트리를 이해해야 할까요?

• 웹 페이지 동적 조작: 자바스크립트를 이용하여 DOM 트리를 조작하면 웹 페이지의 내용을 실시간으로 변경할 수 있습니다.
• 웹 애플리케이션 개발: 복잡한 웹 애플리케이션을 구축하는 기반이 됩니다.
• 프론트엔드 라이브러리/프레임워크 학습: React, Vue, Angular 등 인기 있는 프론트엔드 라이브러리/프레임워크의 기본 원리를 이해하는 데 필수적입니다.