Browser Object Model(BOM)이란?
웹 개발에서 DOM이란, 웹 문서를 위한 programming interface이다. HTML 문서를 객체의 tree 형태로 구조화해서, 개발자들이 웹 페이지의 콘텐츠와 구조와 스타일을 동적으로 접근, 수정 및 제어할 수 있게 해준다. DOM Tree의 각 node는 웹 문서의 구조, 스타일, 콘텐츠를 나타낸다.
DOM의 key features
1. Tree 구조
DOM은 웹 문서를 tree 형태로 표현한다. 이 구조는 문서 내 요소들 간의 관계를 시각적으로 이해하고 프로그래밍적으로 접근할 수 있도록 돕는다.
DOM Tree의 각 node는 다음과 같은 유형이 있다:
- 요소(element) 노드: HTML 요소를 의미한다. ex) <html>, <div>, <p>
- 속성(attribute) 노드: 요소의 속성을 의미한다. ex) class="classname"
- 텍스트(text) 노드: 요소 안의 텍스트를 의미한다.
- 문서(document) 노드: DOM tree의 최상위(Root) node로, 문서 자체를 나타낸다. document 객체를 통해 접근할 수 있다.
- <html> 요소는 document 노드의 자식 node이며, 웹페이지의 최상위 HTML 요소를 나타낸다. <html> 요소는 HTML 문서의 최상위 요소(element)이기 때문에 "document element"이며 document.documentElement 를 통해 접근할 수 있다.
- <head> 요소와 <body> 요소는 <html> 요소의 자식 node이며, 각각 웹문서의 메타정보와 콘텐츠를 포함한다. document.head와 document.body를 통해 접근할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>위를 DOM tree로 표현하면 아래와 같다.
Document
└── html
├── head
│ └── title
│ └── "Example" (Text node)
└── body
└── p
└── "Hello, World!" (Text node)
DOM Tree에서 각 노드는 상위(부모) node와 하위(자식) node의 관계를 가진다.
같은 부모를 공유하는 노드는 형제(sibling) 관계를 가진다.
DOM 트리의 최상위(root) 노드는 document node이다. 일반적으로 HTML 문서에서는 <html> 요소가 최상위 node의 첫 번째 자식이다. (<!DOCTYPE html>은 document node의 자식이지만, 첫 번짜 자식 node는 아니다. 브라우저는 <!DOCTYPE html> 을 독립적인 Doctype node로 유지하고, <html>을 document node의 첫 번째 요소(element) node로 처리한다)
<html>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>- 위 HTML 코드에 의해 <html>을 document node의 첫번째 자식으로 가진 DOM tree가 생성된다.
- <body> node는 <html> node의 child node이다.
- <h1> node와 <p> node는 <body> node의 child node이다.
- <h1> node와 <p> node는 sibling(형제) 관계이다.
console.log(document.firstChild);
// <!DOCTYPE html> (Doctype 노드)
console.log(document.documentElement);
// <html>...</html> (언제나 <html> 요소를 가리킨다)
console.log(document.firstElementChild);
// <html>...</html> (첫 요소 노드를 말한다. <html> 이전에 주석과 같은 노드들이 있으면 값이 달라지고,
// 그게 아니면 보통은 <html> 요소를 의미한다.)
2. 동적 상호작용
개발자는 JavaScript를 사용해 DOM을 동적으로 수정할 수 있다. 요소(element)와 스타일(style)을 추가, 삭제 또는 수정할 수 있다.
const newElement = document.createElement("div");
newElement.textContent = "안녕하세요!";
document.body.appendChild(newElement);DOM을 통해 웹 페이지의 요소들에 대한 동적이고 실시간적인 제어가 가능하다. DOM은 브라우저가 페이지를 로드한 후에도 브라우저가 즉시 반응할 수 있게 하여, 개발자가 페이지의 상태를 효율적으로 제어하고 사용자 인터페이스를 실시간으로 업데이트할 수 있게 한다.
3. 이벤트 처리(Event Handling)
웹 페이지에서 사용자와의 상호작용을 다루는 기능이다.
이벤트는 사용자 또는 시스템에서 발생하는 특정 행동을 나타낸다. 예를 들어, 버튼 클릭, 마우스 오버, 키보드 입력, 페이지 로드 등이 이벤트에 해당한다. 각 이벤트는 특정 DOM 요소에서 발생하며, 이때 이벤트가 발생한 요소에 대한 정보가 전달된다.
DOM은 이벤트를 처리하기 위해 이벤트 리스너(Event Listener)를 사용한다. 이벤트 리스너는 특정 이벤트가 발생했을 때 실행될 함수를 지정하는 역할을 한다.
이를 통해 웹 페이지에 interactive한 기능을 추가할 수 있다.
document.querySelector("button").addEventListener("click", () => {
alert("버튼 클릭!");
});
이벤트는 DOM 트리에서 상위 요소로 전파될 수 있다. 이를 이벤트 캡처링과 이벤트 버블링으로 구분할 수 있다.
- 이벤트 캡처링(Event Capturing): 이벤트가 상위 요소에서 시작해 하위 요소로 전파된다.
- 이벤트 버블링(Event Bubbling): 이벤트가 가장 하위 요소에서 시작해 상위 요소로 전파된다. 기본적으로 이 방식이 사용된다.
상위 요소에 이벤트 리스너를 설정하여 하위 요소에서 발생한 이벤트를 처리하는 방법으로 이벤트 위임(Event Delegation)이 있다. 이를 통해 여러 개의 하위 요소에 각각 이벤트 리스너를 설정하는 대신 상위 요소에서 한 번만 이벤트 리스너를 설정하면 된다.
4. 플랫폼 독립적(Platform-Independent)
DOM은 브라우저나 플랫폼에 관계없이 표준화된 방식으로 스크립트가 문서와 상호작용할 수 있게 해준다.
DOM은 W3C(World Wide Web Consortium)과 같은 표준화 기관에서 정의한 규격에 따라 설계되므로, 모든 브라우저에서 동일한 방식으로 작동하며, 특정 브라우저나 운영 체제에 종속되지 않는다.
DOM은 JavaScript와 긴밀히 통합되어 있으며, JavaScript는 어떤 플랫폼에서 실행되더라도 DOM과 상호작용할 수 있다.
예를 들어, 다음 코드는 브라우저 또는 운영 체제에 상관없이 동일하게 작동한다.
document.getElementById("myElement").textContent = "Hello World!";따라서 클라이언트와 서버 간의 플랫폼 차이를 넘어 웹 애플리케이션의 일관된 동작이 보장된다.
단, DOM 자체는 표준화되어 있지만, 일부 브라우저는 DOM API를 구현하는 방식에서 약간의 차이를 보일 수 있다. 예를 들어, 특정 API가 Internet Explorer와 같이 오래된 브라우저에서는 지원되지 않을 수 있다.
'JavaScript&TypeScript' 카테고리의 다른 글
| [JavaScript] Browser Object Model(BOM) (0) | 2024.12.23 |
|---|---|
| [TypeScript] Custom Type vs Interface (1) | 2023.11.27 |
| [TypeScript] JavaScript vs TypeScript 및 TypeScript 설치방법 (0) | 2023.11.26 |