DOM / BOM

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

DOM은 HTML, XML 문서의 구조를 객체로 표현한 모델이다.
웹페이지의 모든 요소들을 트리 구조로 나타내며, JavaScript가 이를 통해 문서의 내용, 구조, 스타일을 동적으로 조작할 수 있게 해준다.

 

DOM의 특징

• 트리 구조 : HTML 문서의 계층적 구조를 트리 형태로 표현한다
• 노드(Node) 기반 : 문서의 모든 요소는 노드로 구성된다
• 동적 조작 가능 : JavaScript를 통해 실시간으로 요소를 추가, 삭제, 수정할 수 있다
  

DOM API

 

---

BOM (Browser Object Model) - 브라우저 객체 모델

BOM은 웹브라우저를 객체로 모델링한 것이다.

브라우저의 창, 주소창, 히스토리 등을 스크립트 언어로 제어하기 위해 객체화했다.

W3C 표준은 아니지만, 대부분의 브라우저에서 지원한다.

 

주요 BOM 객체들

• window : 브라우저 창을 나타내는 최상위 객체로, 모든 객체가 소속된 전역 객체다.
• document : 현재 문서(DOM)에 대한 정보를 갖고 있는 객체다.
• histroy : 브라우저가 접근했던 URL 히스토리에 대해 접근할 수 있다.

history.back() // 뒤로가기
history.forward() // 앞으로가기
history.go(-2) // 2페이지 뒤로

• location : 문서의 주소와 관련된 객체로, URL에 대한 정보를 가지고 있다.
• navigator : 실행 중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다.
• screen : 사용자의 디스플레이 화면에 대한 정보를 가지고 있다.

// 화면 해상도
console.log(screen.width) // 화면 너비
console.log(screen.height) // 화면 높이

// 사용 가능한 영역 (작업표시줄 제외)
console.log(screen.availWidth)
console.log(screen.availHeight)

// 색상 깊이
console.log(screen.colorDepth)

---

DOM과 BOM은 웹 개발에서 빼놓을 수 없는 핵심 개념이다.
DOM을 통해 웹페이지의 내용을 동적으로 조작하고, BOM을 통해 브라우저의 다양한 기능들을 활용할 수 있다.

특히 현대 웹 개발에서는 React, Vue 같은 프레임워크들이 DOM 조작을 추상화해주지만, 근본적인 동작 원리를 이해하기 위해서는 DOM과 BOM에 대한 이해가 필수적이다. 앞으로 JavaScript를 사용할 때 이 개념들을 염두에 두고 개발한다면, 더욱 효율적이고 안정적인 웹 애플리케이션을 만들 수 있을 것이다.