DOM과 BOM

1. DOM (Document Object Model)

2. BOM (Browser Object Model)

    2.1. Window 객체

    2.2. Location 객체

    2.3. History 객체

    2.4. Screen 객체

    2.5. Navigator 객체

---

1. DOM (Document Object Model)

문서 객체 모델(DOM)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 

 

이러한 DOM은 W3C의 표준 객체 모델이며, 아래와 같이 계층 구조로 표현된다.

 

[그림 1] DOM 계층 구조

자바스크립트는 이러한 객체 모델을 이용해 다음과 같은 작업을 할 수 있다.

• 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
• 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
• 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
• 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
• 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
• 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
• 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

 

DOM의 종류

W3C DOM 표준은 세 가지 모델로 구분된다.

 

(1) Core DOM : 모든 문서 타입을 위한 DOM 모델

(2) HTML DOM : HTML 문서를 위한 DOM 모델

(3) XML DOM : XML 문서를 위한 DOM 모델

 

HTML DOM

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의한다.

모든 HTML 요소는 HTML DOM를 통해 접근할 수 있다.

 

XML DOM

XML DOM은 XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의한다.

모든 XML 요소는 XML DOM를 통해 접근할 수 있다.

 

 

2. BOM (Browser Object Model)

[그림 2] BOM 구조

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이때 사용할 수 있는 객체 모델이 브라우저 객체 모델(BOM)이다.

 

BOM은 DOM과 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다. 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

2.1. Window 객체

window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다. DOM의 요소들도 모두 window 객체의 프로퍼티가 된다.

 

브라우저 창 크기 조절

window 객체의 innerHeight와 innerWidth 프로퍼티를 이용하면, 브라우저의 창 크기를 설정할 수 있다. 여기서 브라우저 창이란 웹 브라우저의 뷰포트(viewport)를 의미하며, 브라우저의 툴바나 스크롤 바는 포함되지 않는다.

 

2.2. Location 객체

location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.

 

현재 문서의 URL 주소

location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다.

document.write("현재 문서의 주소는 " + location.href + "입니다.");

 

현재 문서의 호스트 이름

location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호스트 이름을 반환한다.

document.write("현재 문서의 호스트 이름은 " + location.hostname + "입니다.");

 

현재 문서의 파일 경로명

location 객체의 pathname 프로퍼티는 현재 문서의 파일 경로명을 반환한다.

document.write("현재 문서의 파일 경로명은 " + location.pathname + "입니다.");

 

현재 창에 문서 불러오기

location 객체의 assign() 메소드는 브라우저 창에 지정된 URL 주소에 존재하는 문서를 불러온다. 반면에 replae() 메소드는 새 문서를 불러오기 전에, 현재 문서를 브라우저의 히스토리에서 제거한다는 점이 assign() 메소드와 다르다. location 객체의 reload() 메소드는 브라우저 창에 현재 문서를 다시 불러온다.

function openDocument() {

    location.assign("/index.php");
    
}

function openDocumentWithReplace() {

    location.replace("/index.php");
    
}

 

2.3. History 객체

history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다.

 

히스토리 목록의 갯수

history 객체의 length 프로퍼티는 브라우저 히스토리 목록의 갯수를 반환한다.

function openDocument() {

    location.assign("/javascript/js_born_history");
    
}

document.getElementById("text").innerHTML = "현재 브라우저의 히스토리 목록의 갯수는 " + history.length + "개 입니다.";

 

히스토리 목록 접근하기

history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가지고 있다. 

// back() 메소드 이용

<button onclick="goBack()">이전 페이지로 가기</button>

...

<script>

    function goBack() {
    
        window.history.back();
        
    }
    
</script>

 

또한, go() 메소드를 이용하면 인수로 전달받는 정수만큼 히스토리 목록 사이를 이동할 수도 있다.

// go() 메소드 이용

<button onclick="go()">이전 페이지로 가기</button>

...

<script>

    function go() {
    
        window.history.go(-1);
        
    }
    
</script>

 

2.4. Screen 객체

screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체이다.

 

사용자의 화면 크기

screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환한다.

document.write("현재 사용자의 디스플레이 화면의 너비는 " + screen.width + "픽셀입니다.<br>");

document.write("현재 사용자의 디스플레이 화면의 높이는 " + screen.height + "픽셀입니다.<br>");

document.write("현재 브라우저 창의 너비는 " + window.outerWidth + "픽셀입니다.<br>");

document.write("현재 브라우저 창의 높이는 " + window.outerHeight + "픽셀입니다.<br>");

 

실제 사용할 수 있는 화면 크기

screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환한다. 이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환한다.

document.write("실제 사용할 수 있는 화면의 너비는 " + screen.availWidth + "픽셀입니다.<br>");

document.write("실제 사용할 수 있는 화면의 높이는 " + screen.availHeight + "픽셀입니다.<br>");

 

한 색상당 사용할 수 있는 비트 수

screen 객체의 colorDepth 프로퍼티는 사용자 화면에서 한 색상당 사용할 수 있는 비트 수를 반환한다. 대부분의 컴퓨터는 24비트의 트루 컬러(true colors)나 30/36/48비트의 디프 컬러(deep colors)를 사용한다.

let bitColorDepth = screen.colorDepth;

document.write("사용자 화면에서 한 색상당 사용할 수 있는 비트 수는 " + bitColorDepth + "개입니다.<br>");

document.write("즉, 한 색상은 총 " + Math.pow(2, bitColorDepth) + "가지로 표현됩니다.");

 

화면 픽셀당 표시할 수 있는 비트 수

screen 객체의 pixelDepth 프로퍼티는 사용자 화면에서 픽셀당 표시할 수 있는 비트 수를 반환한다.

let bitPixelDepth = screen.pixelDepth;

document.write("사용자 화면의 한 픽셀당 표시할 수 있는 비트 수는 " + bitPixelDepth + "개입니다.<br>");

 

대부분의 컴퓨터에서 colorDepth와 pixelDepth는 같은 값은 가진다.

 

2.5. Navigator 객체

navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다. 이 객체의 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었다.

 

브라우저 스니핑 (browser sniffing)

과거에는 방문자의 웹 브라우저의 종류를 미리 파악하여 조치함으로써, 브라우저 간의 호환성을 유지했다. 이렇게 호환성을 유지하는 방법을 브라우저 스니핑이라고 한다. navigator 객체는 이러한 브라우저 스니핑에서 사용할 수 있는 다양한 표준 프로퍼티 및 비표준 프로퍼티를 제공한다.

 

현재 브라우저의 이름

navigator 객체의 appName과 appCodeName 프로퍼티는 현재 사용하고 있는 브라우저의 전체 이름을 반환한다. 하지만 브라우저 간의 호환성을 위해 스니핑 코드로 대부분의 브라우저가 브라우저 이름을 "Netscape"로 사용한다. 또한, 대부분의 브라우저가 브라우저 코드명을 "Mozilla"로 사용한다.

document.write("현재 사용 중인 브라우저의 이름은 " + navigator.appName + "입니다.<br>");

document.write("또한, 해당 브라우저의 코드명은 " + navigator.appCodeName + "입니다.");

 

현재 브라우저의 버전

navigator 객체의 appVersion과 userAgent 프로퍼티는 현재 사용하고 있는 브라우저의 버전 정보를 문자열로 반환한다. 이 프로퍼티의 결과로 반환되는 문자열에 대한 표준 형식은 따로 명시되어 있지 않다. 따라서 브라우저마다 약간씩 다른 형식의 문자열로 결과를 반환한다. 

document.write("현재 사용 중인 브라우저의 버전 정보는 " + navigator.appVersion + "입니다.<br>");

document.write("userAgent 프로퍼티로 알 수 있는 추가 정보는 " + navigator.userAgent + "입니다.");

 

현재 브라우저가 실행되고 있는 운영체제

navigator 객체의 platform 프로퍼티는 현재 브라우저가 실행되고 있는 운영체제를 식별하는 문자열을 반환한다.

document.write("현재 브라우저가 실행되고 있는 운영체제는 " + navigator.platform + "입니다.");

 

현재 브라우저의 기본 언어 설정

navigator 객체의 language 프로퍼티는 현재 사용 중인 브라우저의 기본 언어 설정을 반환한다.

document.write("현재 브라우저의 기본 언어 설정은 " + navigator.language + "입니다.");

 

쿠키(cookie) 사용 여부

navigator 객체의 cookieEnabled 프로퍼티는 현재 사용 중인 브라우저가 쿠키를 사용할 수 있는지를 검사하는 비표준 프로퍼티이다.

document.write("현재 브라우저는 쿠키를 ");

if (navigator.cookieEnabled) {

    document.write("사용할 수 있습니다.");
    
} else {

    document.write("사용할 수 없습니다.");
    
}