- Published On
BOM(Browser Object Model)과 DOM(Document Object Model)
BOM(Browser Object Model)과 DOM(Document Object Model)은 웹 브라우저 내에서 작동하는 두 가지 주요 객체 모델입니다.
BOM과 DOM이 무엇이며, 이들의 차이점 및 상호 작용 방법에 대하여 밑에서 그림을 보면서 자세히 살펴보겠습니다.
- 일단 두 가지 모두 Object Model. 즉, 객체 입니다.
BOM(Browser Object Model)이란?
BOM은 브라우저의 창이나 프레임을 포함한 웹페이지의 모든 요소를 객체로 다루어 접근할 수 있게 하는 모델입니다.
즉, BOM을 통해 브라우저 창과 관련된 다양한 기능(예: 창 크기 변경, URL 변경 등)을 스크립트로 제어할 수 있습니다.
가장 널리 알려진 BOM 객체 중 하나는 window 객체인데, 이는 브라우저의 창을 나타냅니다.
DOM(Document Object Model)이란?
DOM은 HTML 문서의 구조를 객체 형태로 표현한 것으로, 웹 페이지의 문서를 프로그래밍적으로 제어할 수 있는 API를 제공합니다.
HTML이나 XML 문서의 각 요소를 노드(node)라는 객체로 표현하며, 이를 통해 문서 구조에 접근하고 수정할 수 있습니다.
가장 기본이 되는 객체는 document 객체입니다. BOM
BOM과 DOM의 차이점
BOM과 DOM은 모두 웹 페이지를 스크립트를 통해 제어하기 위한 객체 모델입니다만, 그 적용 범위와 사용 목적에서 차이를 보입니다.
아래 표는 BOM과 DOM의 주요 차이점, 객체들을 정리한 것입니다
| 기준 | BOM | DOM |
|---|---|---|
| 주요 객체 | window | document |
| 적용 범위 | 브라우저 창 및 기능 | 문서 구조 및 내용 |
| 사용 예 | 창 크기 변경, URL 접근 | 요소 추가, 수정, 삭제 |
| 구분 | 객체 | 설명 | 주요 속성 / 메서드 |
|---|---|---|---|
| BOM | window | 브라우저 창을 나타내는 최상위 객체. 전역 함수와 변수가 속해 있음. | window.open(), window.alert(), window.innerWidth, window.location |
location | 현재 페이지의 URL 정보를 담고 있는 객체. | location.href, location.reload(), location.assign(), location.pathname | |
navigator | 브라우저와 운영체제 정보를 제공. 사용자의 에이전트나 온라인 상태를 감지. | navigator.userAgent, navigator.onLine, navigator.language | |
history | 사용자가 방문한 페이지 기록을 관리. | history.back(), history.forward(), history.length | |
screen | 사용자의 화면 정보 제공. 해상도 및 색상 깊이 등을 알 수 있음. | screen.width, screen.height, screen.availWidth, screen.colorDepth | |
| DOM | document | HTML 문서의 루트 객체. 웹 페이지의 콘텐츠를 프로그래밍적으로 조작 가능. | document.title, document.body, document.getElementById() |
| Element | HTML 요소를 나타내며 DOM 트리의 각 노드로 구성됨. | element.innerHTML, element.classList, element.style | |
| Text | HTML 요소의 텍스트 노드를 나타냄. | textNode.nodeValue | |
| Attribute | 요소의 속성 노드를 나타냄. | element.getAttribute(), element.setAttribute() | |
| Event | DOM에서 발생하는 사용자 상호작용을 나타냄. | addEventListener(), removeEventListener(), event.type |
주요 BOM 객체
window 객체
- 브라우저의 창을 대표합니다. 전역 JavaScript 객체, 함수, 변수 등이 이 객체의 멤버가 됩니다.
- 다른 BOM 객체에 접근하기 위한 기점 역할을 합니다.
- 팝업 창을 생성(window.open)하거나, 창의 크기를 조절(window.resizeTo)하는 등의 작업을 할 수 있습니다.
location 객체
- 현재 창의 URL을 나타냅니다.
- URL을 파싱하여 프로토콜, 호스트 이름, 경로 등을 별도의 속성으로 제공합니다.
- location.href를 사용해 페이지를 다른 URL로 리다이렉트할 수 있습니다.
navigator 객체
- 브라우저 자체에 대한 정보를 제공합니다.
- 브라우저의 이름, 버전, 사용자의 운영체제 정보 등을 포함합니다.
- 사용자가 웹 서핑을 하는 동안 브라우저의 기능을 감지하는 데 사용될 수 있습니다.
history 객체
- 브라우저 세션의 히스토리(방문한 페이지 목록)를 관리합니다.
- history.back(), history.forward() 메소드를 이용해 사용자가 방문했던 이전 또는 다음 페이지로 이동할 수 있습니다.
screen 객체
- 사용자의 스크린(화면)에 대한 정보를 제공합니다.
- 화면의 너비와 높이, 사용 가능한 색상의 수 등을 알 수 있습니다.
- 웹 애플리케이션을 사용자의 디스플레이에 맞춰 최적화하는 데 사용될 수 있습니다.
document 객체
- 현재 브라우저 창에 로드된 웹 문서를 대표합니다.
DOM(Document Object Model)의 진입점으로, 웹 페이지의 콘텐츠와 구조를 조작할 수 있게 해줍니다.- HTML 요소를 추가, 삭제, 수정하는 메소드를 제공합니다.
- 이게 현재 설명하고 있는
DOM입니다.
주요 DOM 객체
Document 객체
-
DOM 트리의 진입점으로, 전체 문서를 대표합니다.
-
문서의 로딩, 문서 내 요소의 검색(getElementById, getElementsByClassName, querySelector 등), 요소 생성(createElement, createTextNode 등)과 같은 다양한 작업을 할 수 있는 메서드를 제공합니다.
요소(Element) 노드
-
HTML 요소(태그)를 나타내는 노드로, <div>, <p>, <a> 등의 태그와 매칭됩니다.
-
요소 노드는 자식 노드를 가질 수 있으며, 텍스트 노드나 다른 요소 노드가 될 수 있습니다.
-
요소의 속성을 접근하거나 수정할 수 있으며(getAttribute, setAttribute), 스타일이나 클래스를 조작하는 메서드(style, classList)도 제공합니다.
텍스트(Text) 노드
-
요소 노드의 내용(텍스트)을 담고 있는 노드입니다.
-
텍스트 노드는 자식 노드를 가질 수 없으며, 텍스트 내용만을 포함합니다.
속성(Attribute) 노드
-
요소의 속성을 나타내는 노드로, 요소 노드와 연결되어 있습니다.
-
예를 들어, <a href="abc.com">link <a>에서
href="abc.com"부분이 속성 노드입니다.
속성 노드는 해당 속성의 이름과 값을 가집니다.
이벤트(Event)
-
DOM에서 이벤트는 문서나 문서 내 요소들에서 발생하는 다양한 상호작용(예: 클릭, 키보드 입력, 마우스 이동 등)을 나타냅니다.
-
이벤트 리스너를 사용하여 특정 이벤트가 발생했을 때 실행될 콜백 함수를 지정할 수 있습니다(addEventListener).
코드를 통해 알아보기
아래의 HTML 파일이 있다고 가정합니다.
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
그 HTML파일의 DOM 트리는 아래와 같습니다.
document
├── html
├── head
│ ├── title
│ │ └── "My Document"
└── body
├── h1#main-heading
│ └── "Hello, World!"
└── p
└── "This is a paragraph."
JavaScript를 사용하여 DOM 요소에 접근하고 조작하는 예는 아래와 같습니다.
// 문서의 제목(title)을 변경
document.title = "New Title";
// id가 "main-heading"인 요소의 텍스트를 변경
var heading = document.getElementById("main-heading");
heading.innerText = "New Heading";
// 새로운 단락 요소를 생성하여 추가
var newParagraph = document.createElement("p");
newParagraph.innerText = "This is a new paragraph.";
document.body.appendChild(newParagraph);
요약
-
BOM은 브라우저 창과 관련된 정보와 기능을 제공하며, 브라우저의 창, URL, 히스토리, 화면 정보 등을 조작할 수 있습니다.
-
DOM은 HTML 문서의 구조와 내용을 조작하는 객체 모델로, 웹 페이지 내의 요소 추가, 삭제, 수정 등을 가능하게 합니다.
-
window객체는 BOM의 최상위 객체이며,document객체는 DOM의 진입점으로 웹 문서를 조작할 수 있습니다.
연관된 포스트 구경가기