[JavaScript] 자바스크립트의 객체 모델 DOM, BOM

자바스크립트에서 BOM, DOM이라는 개념은 무척 중요한 개념이다.

이전에 국비 과정에서도 배운 적이 있으나, 사실 그 때는 제대로 이해하지 못한 개념이었다.

그런데 '객체'라는 개념을 좀 더 탄탄히 한 후에 다시 보니 이제야 얼추 감이 온다.

 

어떤 코드가 DOM에 해당되느냐, BOM에 해당되느냐에 따라서

문서와 브라우저가 각기 주도권을 주고받는 과정이 달라져 코드 실행결과가 예상과 달라지기도 한다.

 

 

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

브라우저 객체 모델이란, 말 그대로 브라우저에 대한 모든 내용을 담고있는 객체이다.

브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하도록 제공되는 객체들이다.

대표적으로 아래와 같은 객체들이 존재한다. (이보다 훨씬훨씬 많음)

 

- window 객체(최상위 객체)

    - location 객체 (url 주소와 관련)
    - navigator 객체

    - history 객체 (앞뒤 페이지 이동정보를 기록)
    - screen 객체

    - document 객체

    - string, boolean, object, number, function, array 등의 자료형

 

여기에서 window 객체는 모든 BOM 객체들의 조상, 즉 최상위 객체(=전역 객체 =글로벌 객체)이다.

모든 객체를 다 포함하고 있기 때문에 코딩을 할 때는 굳이 표기하지 않고 생략이 가능하다.

하나의 윈도우(열린 창)마다 하나의 window 객체가 생성된다.

 

또한 사용자가 선언한 전역변수들도 모두 window 객체 안에 등록된다.

(단, 지역변수 즉 함수 안에서 선언한 변수들은 그 함수 안에서만 쓸 수 있다.)

 

따라서 위에서 적은 대표적 객체들 말고도 굉장히 많은 속성, 컬렉션, 메소드들이 존재한다.

window.open("sURL", "sWindowName", "sFeature");

window.close();

그 중에서도 많이 사용하는 것은 위와 같이 윈도우 창을 열고 닫는 메소드이다.

 

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

문서 객체 모델, 또는 도큐먼트 객체 모델을 나타내는 DOM은  문서에 대한 모든 내용을 담고 있는 객체이다.

HTML 태그를 동적으로 제어하기 위해 꼭!! 알아두어야 할 개념이다.

 

브라우저는 HTML 페이지를 로드하는 과정에서 HTML 태그들을 각기 하나의 객체로 만든다.

따라서 DOM은 HTML 태그당 하나씩 있으며, 이름은 태그 이름과 같다.

예를 들어 <p>...</p>로 구성된 요소는 p 객체, <div>로 구성된 요소는 div 객체 이런 식이다.

이와같이 HTML 문서의 각 요소를 객체화한 것이 HTML DOM 객체이다.

 

DOM의 목적은 아래와 같다.

 - 동적 HTML 제어
 - elements(요소)에 대한 접근 --> HTML, CSS 내용 변경

 

 

DOM객체는 다음 5종류의 속성으로 구성된다.

이 정보들은 모두 DOM 객체의 구성요소가 된다.

- property

- method

- event listener

- collection

- css style

 

 

그리고 또 하나 알아야 할 개념은 'DOM 트리'이다.

 

HTML 태그는 포함관계(즉, 부모자식 관계)가 존재한다. 브라우저는 HTML 페이지를 로드하면서 이 포함관계에 따라 DOM 객체들을 트리구조로 만드는데, 이게 바로 DOM 트리이다.

 

DOM 트리의 최상위 객체는 document 객체이다.

그러나 충격적이게도(?) document 객체는 DOM 객체가 아니다.

document 객체는 BOM 객체로 보아야 하기 때문이다.

 

이 때문에 document 객체에는 CSS 스타일 시트가 없어 CSS 스타일 속성 등과 연결되어 있지 않고,

document.style.color 등의 접근은 잘못된 코드이므로 오류가 발생한다.

document.open()

document.close()

도큐먼트 객체에서도 open(), close() 함수가 존재한다.

그러나 윈도우 창 자체를 열고 닫았던 window 객체의 open(), close()와는 달리

document 객체의 open(), close()는 브라우저 내 HTML 텍스트를 싹 지워버리고,(open())

새로운 내용을 쓴 뒤에(document.write()) 객체를 닫아주는(close()) 역할을 한다.

따라서 document.open()을 실행한 후 브라우저의 소스를 보면 아래 캡쳐처럼 싹 깨끗해진 모습이다.

 

DOM 객체에 대한 내용은 매우 중요하고도 방대하므로 새로운 포스팅에 이어서 적도록 하겠다.