BOM(Browser Object Model)과 DOM(Document Object Model)

BOM(Browser Object Model)과 DOM(Document Object Model)은 웹 브라우저 내에서 작동하는 두 가지 주요 객체 모델입니다.

BOM과 DOM이 무엇이며, 이들 간의 차이점 및 상호 작용 방법에 대하여 자세히 살펴보겠습니다.

BOM(Browser Object Model)이란?

BOM은 브라우저의 창이나 프레임을 포함한 웹페이지의 모든 요소를 객체로 다루어 접근할 수 있게 하는 모델입니다.

즉, BOM을 통해 브라우저 창과 관련된 다양한 기능(예: 창 크기 변경, URL 변경 등)을 스크립트로 제어할 수 있습니다.

가장 널리 알려진 BOM 객체 중 하나는 window 객체인데, 이는 브라우저의 창을 나타냅니다.

DOM(Document Object Model)이란?

DOM은 문서의 구조를 객체 형태로 표현한 것으로, 웹 페이지의 문서를 프로그래밍적으로 제어할 수 있는 API를 제공합니다.

HTML이나 XML 문서의 각 요소를 노드(node)라는 객체로 표현하며, 이를 통해 문서 구조에 접근하고 수정할 수 있습니다.

가장 기본이 되는 객체는 document 객체입니다.

BOM과 DOM의 차이점

BOM과 DOM은 모두 웹 페이지를 스크립트를 통해 제어하기 위한 객체 모델입니다만, 그 적용 범위와 사용 목적에서 차이를 보입니다.

아래 표는 BOM과 DOM의 주요 차이점을 정리한 것입니다.

주요 BOM 객체

window 객체

• 브라우저의 창을 대표합니다. 전역 JavaScript 객체, 함수, 변수 등이 이 객체의 멤버가 됩니다.
• 다른 BOM 객체에 접근하기 위한 기점 역할을 합니다.
• 팝업 창을 생성(window.open)하거나, 창의 크기를 조절(window.resizeTo)하는 등의 작업을 할 수 있습니다.

location 객체

• 현재 창의 URL을 나타냅니다.
• URL을 파싱하여 프로토콜, 호스트 이름, 경로 등을 별도의 속성으로 제공합니다.
• location.href를 사용해 페이지를 다른 URL로 리다이렉트할 수 있습니다.

navigator 객체

• 브라우저 자체에 대한 정보를 제공합니다.
• 브라우저의 이름, 버전, 사용자의 운영체제 정보 등을 포함합니다.
• 사용자가 웹 서핑을 하는 동안 브라우저의 기능을 감지하는 데 사용될 수 있습니다.

history 객체

• 브라우저 세션의 히스토리(방문한 페이지 목록)를 관리합니다.
• history.back(), history.forward() 메소드를 이용해 사용자가 방문했던 이전 또는 다음 페이지로 이동할 수 있습니다.

document 객체

• 현재 브라우저 창에 로드된 웹 문서를 대표합니다.
• DOM(Document Object Model)의 진입점으로, 웹 페이지의 콘텐츠와 구조를 조작할 수 있게 해줍니다.
• HTML 요소를 추가, 삭제, 수정하는 메소드를 제공합니다.

screen 객체

• 사용자의 스크린(화면)에 대한 정보를 제공합니다.
• 화면의 너비와 높이, 사용 가능한 색상의 수 등을 알 수 있습니다.
• 웹 애플리케이션을 사용자의 디스플레이에 맞춰 최적화하는 데 사용될 수 있습니다.

주요 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).