[JavaScript] DOM, BOM

웹 브라우저 구성 요소들은 하나하나 객체화 되어 있으며, 객체들은 서로 계층적인 관계로 구조화되어 있다.

 

BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류이다.

 

 

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

• 웹 브라우저에 대한 모든 내용을 담고 있는 객체로, 브라우저가 가진 정보를 따로 객체화하여 관리
• 브라우저가 열리면 최상위 객체인 Window가 가장 먼저 생성된 후, 하위 요소에 해당하는 객체 생성
• 브라우저의 정보를 변형하여 웹 브라우저 창의 기능을 쉽게 조작할 수 있도록 함

// BOM 활용 예시
console.log(navigator.userAgent);
location.href = 'www.naver.com';
history.back();
window.close();

1. navigator: 브라우저 및 브라우저의 환경 정보를 제공
2. window: 최상위 객체로, 브라우저 창이 열릴때마다 생성
3. document: 현재 문서에 대한 정보 제공
4. location: 현재 브라우저에 표시된 Html 문서의 주소를 얻거나 새 문서를 불러올 때 사용
5. history: 브라우저의 히스토리 정보와 문서 상태 목록 제공
6. screen: 화면에 대한 정보 제공

 

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

• 문서 객체: Html 문서의 태그들을 JavaScript가 이용할 수 있는 Object로 만든 것
• Document와 관련된 객체의 집합으로, 웹 브라우저가 Html 페이지를 인식하는 방법
• Tree 형식의 자료구조를 가지며, Html 태그를 동적으로 제어할 수 있음

 // DOM 활용 예시
var test = document.getElementsByTagName("test");
document.body.style.background = 'red';

// (1) 생성
document.createElement('tag');

// (2) 선택
document.getElementsById('test');

// (3) 수정
element.innerText = 'update';
element.style.background = 'black';

// (4) 삭제
document.removeChild('element');

1. 문서노드 (Document Node): 트리의 최상위에 존재, Html 문서 전체를 의미
2. 요소노드 (Element Node): 속성 노드를 가질 수 있는 유일한 노드로, 태그를 의미 (ex) <p>, <div>)
3. 속성노드 (Attribute Node): 태그 안의 속성을 사용할 수 있는 것을 의미 (ex) name, value)
4. 텍스트노트 (Text Node): 태그 내 텍스트를 의미 (ex) <span>test</span>)

 

DOM과 BOM의 차이

DOM은 Document, 즉 눈으로 보이는 웹 브라우저에 대한 제어 변경
BOM은 Document가 아닌 Window 제어 변경