DOM과 BOM
웹 개발을 시작하면서 JavaScript를 배우다 보면 "DOM"과 "BOM"이라는 용어를 자주 접하게 된다. 처음 접하는 사람들에게는 이 용어들이 다소 생소하게 느껴지는데 이번 포스팅에서 깔끔하게 DOM과 BOM이 무엇인지, 둘의 차이와 역할에 대해 간단히 알아보자.
DOM이란?
DOM(Document Object Model)은 웹 페이지의 구조와 내용을 표현하는 계층적 모델이다. 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진(Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko 등)이 있는데 이 렌더링 엔진이 HTML로 작성된 문서를 하나하나 해석한 후, JavaScript로 접근할 수 있도록 문서를 객체화한다. 이렇게 웹 문서를 객체화한 것을 Document Object Model의 약자인 DOM이라고 부른다. 브라우저가 HTML 문서를 해석하면 DOM 트리 구조를 생성하는데, 이 구조를 통해 JavaScript로 HTML 요소를 조작하거나 스타일을 변경할 수 있다.
DOM 트리와 노드(Node)
DOM 트리는 HTML 문서의 부모 태그와 여러 자식 태그를 나무와 같은 형태로 표현한 구조이다. 이때 각각의 HTML 요소를 노드(Node)라고 합니다. 예를 들어, <div>, <h1> 태그 각각이 하나의 노드가 된다.
DOM에 접근하려면 최상위 객체인 document를 사용해야 한다. document는 DOM 트리에 접근하는 진입점 역할을 하며, 이를 통해 HTML 요소를 조작할 수 있다.
DOM 접근과 제어
// DOM 트리 최상위 노드에 접근
console.log(document.getRootNode());
// 특정 노드에 접근
console.log(document.childNodes[1].childNodes[2]);
// 특정 요소의 내용을 변경
const title = document.querySelector('h1');
title.textContent = "변경된 제목";위 코드에서 document 객체의 다양한 프로퍼티와 메서드를 사용해 DOM 요소를 탐색하고 수정할 수 있다. DOM의 상세한 프로퍼티와 메서드는 MDN Web Docs에서 확인할 수 있다.
DOM은 브라우저가 제공하는 API
DOM은 브라우저에서 JavaScript를 사용해 HTML 요소를 제어할 수 있도록 제공되는 API이다. DOM요소를 통해 동적인 웹 페이지를 쉽게 구현할 수 있다.
DOM의 주요 특징
- 노드(Node): DOM은 문서의 각 요소를 노드로 표현한다. 예를 들어, <div> 태그는 하나의 노드로 간주된다.
- 계층 구조: DOM은 부모-자식 관계를 가지는 계층적 구조로 이루어져 있다.
- 조작 가능: JavaScript를 사용하여 DOM을 통해 요소를 추가, 삭제, 수정할 수 있다.
DOM의 예시
아래 코드는 <h1>요소를 document.getElementById("title").innerText 프로퍼티를 통해 HTML 요소를 제어하는 코드이다.
<!DOCTYPE html>
<html>
<head>
<title>DOM 예제</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button onclick="changeText()">텍스트 변경</button>
<script>
function changeText() {
document.getElementById('title').innerText = '안녕하세요, DOM!';
}
</script>
</body>
</html>
BOM이란?
BOM(Browser Object Model)은 브라우저 창과 관련된 객체 모델로, 브라우저 창을 제어하기 위한 인터페이스라고도 할 수 있다. DOM이 HTML 문서를 조작하는 데 초점을 맞춘다면, BOM은 브라우저 자체를 제어하는 데 사용된다. BOM을 사용하면 창 크기, 스크롤 위치, URL 등 브라우저 환경과 상호작용할 수 있다. BOM은 브라우저 환경과 상호작용할 수 있는 다양한 객체를 제공합니다.
BOM의 주요 기능
- window 객체: BOM의 최상위 객체로, 브라우저 창 자체를 나타낸다.
- document 객체: 현재 문서에 대한 정보를 나타내며, DOM 트리의 진입점 역할을 한다.
- navigator 객체: 사용자의 브라우저 정보(사용자 에이전트 등)를 제공한다.
- 사용자 에이전트(User Agent) : 브라우저와 운영 체제에 대한 정보를 포함한 문자열로 브라우저가 서버에 요청을 보낼 때 사용된다. Mozilla/5.0( Windows NT 10.0; Win64; x64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36과 같은 형태의 문자열이다.
- 크로스 브라우징 이슈를 해결할 때 사용할 수 있다 (Chrome -> addEventListener, IE -> attachEvent)
- location 객체: 현재 페이지의 URL 정보를 제공하는 객체로 현재 페이지의 URL을 가져오거나 페이지 이동을 처리할 수 있다. 문서의 주소와 관련된 객체이므로 window객체의 프로퍼티인 동시에 documnet의 프로퍼티 이다.
- history 객체: 사용자의 탐색 기록을 제어할 수 있다.
- screen 객체: 사용자의 디스플레이 화면에 대한 정보를 제공한다.
BOM의 예시
아래 예시를 통해 웹 브라우저에서 개발자도구 콘솔창으로 실습을 해볼 수 있다. 아래 코드에 window부분은 생략하여 사용해도 무관한다.
// 현재 URL 가져오기
console.log(window.location.href);
// 새 창 열기
window.open('https://devchaeyoung.tistory.com/');
// 탭 닫기
window.close();
// 경고창
window.alert("알럴트!!!");
// 뒤로 가기
window.history.back();
// 앞으로 가기
window.histody.forward();위 코드는 BOM을 사용하여 브라우저와 상호작용하는 방법을 보여준다.
DOM과 BOM의 차이점
| DOM | BOM |
| HTML 문서를 조작하기 위한 모델 | 브라우저 창을 제어하기 위한 모델 |
| document 객체가 핵심 | window 객체가 핵심 |
| HTML 요소 및 속성 조작 가능 | 브라우저 창, URL, 히스토리 등 제어 |
마무리
DOM과 BOM은 JavaScript를 사용하여 웹 페이지와 브라우저를 제어하는 데 매우 중요한 역할을 한다. DOM은 주로 HTML 콘텐츠를 다루는 데 사용되며, BOM은 브라우저 창과 관련된 작업을 처리한다. 이 둘의 개념을 명확히 이해하면 JavaScript로 보다 효율적인 웹 개발을 할 수 있을 것이다.
추가로 공부하면 좋은 자료
- navigator 객체로 현 위치 정보 가져오기
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition - 추가적인 location 메서드에 대해 알고 싶다면? 아래 사이트에서 다양한 속성과 메서드를 확인할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/API/Location
참고 자료
https://developer.mozilla.org/en-US/
https://www.youtube.com/watch?v=3c4xp8U3jjM&t=311s
'Web Frontend' 카테고리의 다른 글
| API 쉽게 이해하기, API 어디까지 쓰이는걸까? (0) | 2025.01.05 |
|---|---|
| JavaScript this 이제 헷갈리지말자 (0) | 2025.01.05 |
| HTML파일에서 JS파일을 효과적으로 가져오는 법 (1) | 2025.01.04 |
| JS 알고리즘 테스트 환경 VS code로 세팅하기 (0) | 2024.08.22 |
| 객체 지향 프로그래밍, 프로토타입 이해하기 (0) | 2024.08.02 |
