이번 글은 웹 프론트엔드 개발자에게 익숙한 DOM(document Object Model)에 대해서 알아보려고 합니다.
DOM이란?
DOM은 계층적 구조를 가진 노드 트리이며, 마크업 언어로 작성된 문서를 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스입니다.
사진 예시로 확인해 보겠습니다.
첫 번째 사진은 마크업 문서로 작성된 정적 문서입니다.
이 문서는 HTML이나 XML 같은 마크업 언어로 작성된 것으로, 사용자가 페이지에 접속할 때 브라우저가 서버로부터 받아오는 데이터이며 구조와 내용을 정의합니다.
두 번째 사진은 HTML을 브라우저가 파싱하여 계층적 구조를 가진 노드 트리로 변환한 결과입니다.
이를 활용하여 자바스크립트와 같은 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스를 의미합니다.
DOM의 주요 특징은 다음과 같습니다.
- 트리 구조: DOM은 문서의 요소들을 트리 형태로 표현하며, 각각의 노드는 문서의 각 요소(HTML 태그, 속성, 텍스트 등)를 나타냅니다. 예를 들어, <html> 태그는 가장 최상위 노드이며, 그 아래에 <head>와 <body> 같은 자식 노드들이 있습니다.
- 프로그래밍 인터페이스: DOM은 자바스크립트와 같은 프로그래밍 언어를 통해 접근할 수 있습니다. 이를 통해 개발자는 HTML 요소를 생성, 수정, 삭제할 수 있으며, 이벤트를 추가하거나 스타일을 변경하는 등의 작업을 할 수 있습니다.
- 동적 조작: DOM은 웹 페이지가 로드된 후에도 변경될 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 새로운 콘텐츠를 추가하거나, 스타일을 변경하는 등의 동적 동작이 가능합니다.
DOM은 왜 필요할까?
DOM(Document Object Model)은 동적인 웹 페이지를 구현하는 데 필수적인 역할을 합니다.
웹 페이지는 일반적으로 HTML이나 XML과 같은 마크업 언어로 작성되며, 이러한 언어들은 문서의 구조와 내용을 정의하는 데 사용됩니다. 그러나 이러한 마크업 언어만으로는 웹 페이지의 내용과 구조를 동적으로 제어할 수 있는 기능이 부족하기 때문에 DOM이 필요하게 됩니다.
DOM은 웹 페이지의 구조를 트리 형태로 표현하여 프로그래밍 언어, 특히 자바스크립트가 문서에 접근하고 조작할 수 있도록 합니다.
이를 통해 개발자는 웹 페이지를 동적으로 변화시키는 다양한 기능을 구현할 수 있습니다.
예를 들어, 사용자가 버튼을 클릭했을 때 특정 함수를 실행하거나, 사용자 입력에 따라 페이지의 콘텐츠를 실시간으로 변경하는 기능을 구현할 수 있습니다. 이 모든 것이 DOM을 통해 가능해지며, 다음과 같은 방식으로 활용될 수 있습니다:
1. 이벤트 핸들링: DOM을 통해 특정 요소에 이벤트 리스너를 추가할 수 있습니다. 이를 통해 사용자가 특정 동작(예: 클릭, 키 입력)을 했을 때, 미리 정의된 함수가 실행되도록 할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 팝업 창이 뜨거나, 페이지의 일부 내용이 변경될 수 있습니다.
2. 요소 조작: DOM을 사용하면 웹 페이지 내의 요소를 동적으로 추가, 삭제, 또는 수정할 수 있습니다. 예를 들어, 사용자가 제품을 장바구니에 추가하면, 장바구니 목록에 새로운 항목이 실시간으로 추가되거나, 이미 추가된 항목의 수량이 업데이트될 수 있습니다.
3. 스타일 변경: DOM을 통해 페이지 내 요소들의 스타일을 동적으로 변경할 수 있습니다. 예를 들어, 사용자가 특정 테마를 선택하면, 페이지의 색상이나 글꼴이 즉시 변경될 수 있습니다.
4. 문서 탐색 및 조작: DOM 트리 구조를 통해 특정 요소를 쉽게 탐색하고 조작할 수 있습니다. 예를 들어, 특정 클래스나 ID를 가진 요소를 찾아서 그 안의 내용을 변경하거나, 속성을 추가할 수 있습니다.
그럼 DOM은 왜 계층적 구조를 가지고 있을까?
DOM(Document Object Model)은 계층적 구조를 가지는 이유는 노드들 간의 관계가 부모, 자식, 형제 등으로 명확하게 정의하여 여러 가지 작업을 효율적으로 수행하기 위함입니다.
명확한 관계 정의
계층적 구조에서는 각 노드 간의 관계가 부모, 자식, 형제 등의 형태로 명확하게 구분됩니다. 이러한 구조 덕분에 개발자는 문서 내에서 특정 요소가 어디에 위치하고 있으며, 다른 요소들과 어떻게 연결되어 있는지를 쉽게 파악할 수 있습니다. 예를 들어, 부모 노드는 자식 노드를 포함하며, 형제 노드들은 같은 부모를 공유합니다. 이러한 명확한 관계 정의는 문서 구조를 직관적으로 이해하고, 효율적으로 조작하는 데 큰 도움을 줍니다.
노드의 추가, 제거, 이동 작업의 용이성
계층적 구조를 사용하면 노드를 추가하거나 제거하는 작업이 간단해집니다. 예를 들어, 특정 부모 노드 아래에 새로운 자식 노드를 쉽게 추가하거나, 불필요한 노드를 제거할 수 있습니다. 또한 노드의 위치를 이동시켜 다른 부모 아래에 배치하는 작업도 간편합니다. 이와 같은 작업들은 DOM의 트리 구조 덕분에 논리적으로 수행될 수 있습니다.
이벤트 처리의 효율성
계층적 구조는 이벤트 처리를 효율적으로 수행할 수 있는 기반을 제공합니다. DOM 이벤트 모델에서 중요한 개념인 이벤트 버블링과 이벤트 캡처링이 그 예입니다.
이러한 이벤트 전파 메커니즘은 DOM이 계층적 구조를 갖기 때문에 가능하며, 효율적으로 동작할 수 있습니다.
계층적 구조 덕분에 이벤트가 어느 경로로 전파될지 명확하게 정의할 수 있으며, 특정 이벤트를 원하는 위치에서 쉽게 처리할 수 있습니다.
이벤트 버블링: 이벤트가 발생한 요소에서부터 상위(부모) 요소들로 이벤트가 전파되는 과정을 말합니다. 예를 들어, 자식 노드에서 클릭 이벤트가 발생하면, 이 이벤트는 부모 노드로, 그리고 최상위 문서까지 전파될 수 있습니다.
이벤트 캡처링: 이벤트가 최상위 문서에서부터 시작하여 이벤트 발생 요소까지 내려가는 과정을 말합니다. 이는 이벤트가 발생하기 전에 상위 요소에서 먼저 이벤트를 처리할 수 있도록 해줍니다.
끝
'WEB > Why? 시리즈' 카테고리의 다른 글
| [Why? 시리즈] 3장 - 왜 React Hook Form은 리렌더링을 발생시키지 않을까? (0) | 2024.08.09 |
|---|---|
| [Why? 시리즈] 2장 - 왜 Next.js 라우팅은 폴더 기반일까? (0) | 2024.08.07 |
| [Why? 시리즈] 1장 - 왜 npm run start 로 서버를 띄우는 걸까? (1) | 2024.08.06 |
| [Why? 시리즈] 0장 - 시작하기 (0) | 2024.08.05 |
