[JavaScript] 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)

브라우저 객체란?

브라우저에 내장된 객체를 브라우저 객체라 한다. window는 브라우저 객체의 최상위 객체이다. window 객체는 하위 객체를 포함하고 있다. 즉, 계층적 구조로 이루어져 있으며 이를 일컬어 브라우저 객체 모델이라고 한다.

window 객체

window는 브라우저 객체의 최상위 객체이며, 다음과 같은 메소드를 사용할 수 있다.

 

종류	의미
open()	새 창을 열 때 사용한다.
alert()	경고 창을 띄운다.
prompt()	질의응답 창을 띄운다.
setInterval()	일정 간격으로 지속적으로 실행문을 실행시킬 때 사용한다.
setTimeout()	일정 시간 뒤에 실행문을 실행시킬 때 사용한다.

 

문서 객체 모델

HTML 문서의 구조를 가리켜 문서 객체 모델이라 한다. HTML 각 태그마다 기능과 속성을 가지고 있다. 문서 객체 모델 학습의 주된 목적은 자바스크립트를 사용하여 문서 객체를 선택하고 속성 또는 스타일을 정의하기 위함이다.

하지만 자바스크립트 문서 객체 모델은 IE8 이하 버전과 그 외 파이어폭스, 크롬, 사파리 등의 브라우저 간에 호환성이 떨어진다는 단점이 있다.
그러나 제이쿼리(jquery)는 이런 호환성이 떨어지는 단점들을 대부분 해결하였다고 한다.

 

선택자

자바스크립트의 이벤트(event)를 사용하여 어떤 상황이 발생했을 때마다 웹문서가 동적으로 대응하도록 할 수 있다. 그러한 동작을 가능하게 하기 위해서는 문서 객체의 선택자 사용법을 알고 있어야 한다.

선택자에는 크게 직접 문서에서 요소를 선택해오는 직접 선택자와 선택해 온 문서 객체를 기준으로 가까이에 있는 요소를 선택하는 인접 관계 선택자가 있다.

직접 선택자

종류	의미
document.getElementById()	아이디를 이용해 요소 선택하기.
document.getElementsByTagName()	요소의 이름을 이용해 요소들을 선택하기.
document.formName.inputName	폼 요소에 name 속성을 이용해 요소 선택하기

인접 요소 선택자

종류	의미
parentNode	선택한 요소의 부모요소 선택하기.
children	선택한 요소의 자식요소 선택하기.
previousSibling	선택한 요소의 이전에 오는 형제 요소들만 선택하기
nextSibling	선택한 요소의 다음에 오는 형제 요소들만 선택하기.