[Javascript] 객체 모델 BOM, DOM

1)자바스크립트의 객체 모델 DOM, BOM

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

브라우저에 대한 모든 내용을 담고있는 객체로서 브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하도록 제공되는 객체들이다. 대표적으로 아래와 같은 객체들이 존재한다.

 

window 객체(최상위 객체)

    - location 객체 (url 주소와 관련)
    - navigator 객체
    - history 객체 (앞뒤 페이지 이동정보를 기록)
    - screen 객체
    - document 객체
    - string, boolean, object, number, function, array 등의 자료형

 

①window 객체

 

⑴개요

window 객체는 모든 BOM 객체들의 조상, 즉 최상위 객체(=전역 객체 =글로벌 객체)이다. 모든 객체를 다 포함하고 있기 때문에 코딩을 할 때 생략이 가능하다. 하나의 윈도우(열린 창)마다 하나의 window 객체가 생성된다.  또한 사용자가 선언한 전역변수들도 모두 window 객체 안에 등록된다.  (단, 지역변수 즉 함수 안에서 선언한 변수들은 그 함수 안에서만 쓸 수 있다.)

 

⑵관련 메소드 (open(), close())

 

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

 

이 외에도 다양한 속성, 컬렉션, 메소드들이 존재한다.

 

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

문서에 대한 모든 내용을 담고 있는 객체로서 HTML 태그를 동적으로 제어하기 위해 알아야할 개념이다.

 

ⓐ각기 하나의 객체인 HTML 요소 (본 게시글 핵심)

브라우저는 HTML 페이지를 로드하는 과정에서 HTML 태그들을 각기 하나의 객체로 만든다. 따라서 DOM은 HTML 태그당 하나씩 있으며, 이름은 태그 이름과 같다. 예를 들어 <p>...</p>로 구성된 요소는 p 객체, <div>로 구성된 요소는 div 객체 이런 식이다. 이와 같이 HTML 문서의 각 요소를 객체화한 것이 HTML DOM 객체이다

 

ⓑDOM의 목적

HTML elements(요소)에 대한 접근하여 제어함(HTML, CSS 내용 변경 등)

 

ⓒDOM 객체의 구성요소.

①property: DOM 객체의 멤버 변수. HTML 태그의 속성 반영

②method: DOM 객체의 멤버 함수. HTML 태그를 제어 

③event listener: HTML태그에 작성된 이벤트 리스너를 그대로 가진다.

④collection(*): 정보를 집합적으로 표현하는 일종의 배열. 예를 들어 childeren 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가진다.

⑤css style(**):  style 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능

 

(*)document.form 객체 내부 요소에 접근하기

⑴HTML collection 예시

body 객체(document.body)와 마찬가지로, 폼(form)은 document의 직계 객체로 설계되어 있습니다. 차이점이 있다면, 문서 내에 폼이 여러 개가 될 수 있으므로 document.forms 유사배열(HTMLCollection)에 담기게 됩니다. 

 

⑵유사 배열 내부요소 접근

위와 같이 폼 요소를 DOM으로 접근한 이후 이어서 폼 내부 인터페이스 요소들을 name 또는 type의 속성값을 식별자로 접근할 수 있음. 이 때 점 표기법 또는 괄호 표기법을 사용함.

 

-Dot notation

document.formName.elementName || elementTypeName

-Bracket notation

document.forms['formName'].elements['elementName || elementTypeName']

⑶참고 URL

폼(form) 제어를 위한 3가지 유용한 팁

 

(**)객체와 속성(MDN)

객체는 속성의 컬렉션이고, 속성은 이름(Key)과 값(Value) 사이의 연결 관계입니다. 이 때 속성의 값이 함수인 경우에는 메서드라고 부릅니다. 브라우저 안에 미리 정의된 객체 뿐만 아니라 여러분이 직접 객체를 정의할 수도 있습니다. 

 

객체는 속성에 접근할 땐 간단한 마침표 표기법을 사용합니다.

objectName.propertyName

JavaScript의 객체 속성은 대괄호 표기법(속성 접근자)을 사용해 접근할 수도 있습니다.

myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';

 

ⓓDOM 트리

①정의

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

②document 객체

DOM 트리의 최상위 객체는 document 객체인데 주의할 점은 document 객체는 DOM 객체가 아닌 BOM 객체로 보아야 함. 예를 들어 document 객체는 CSS 스타일 속성 등과 연결되어 있지 않으며 document.style.color 등의 접근은 잘못된 코드로 오류가 발생한다.

 

ⓔDOM 트리을 활용한 DOM 객체 접근

DOM 객체들은 DOM 트리에서 포함관계를 가지며 서로 부모, 자식, 형제의 관계로 연결되어 있다. 

모든 DOM 객체들은 아래 6개의 프로퍼티를 가지고 다른 DOM 객체를 쉽게 접근할 수 있다. 

- parentElement - 부모 객체

- children - 직계 자식들의 컬렉션

- firstElementChild - 첫 번째 직계자식

- lastElementChild - 마지막 직계자식

- previousElementSibling -같은 sibling 관계에 있는 DOM 객체

- nextElementSibling -같은 sibling 관계에 있는 DOM 객체

 

ⓕthis 

DOM 객체에서 객체 자신을 가리키는 용도로 사용된다.

<div onclick = "this.style.backgroundColor = 'orange'">

 

위와 같은 코드가 있다고 했을 때, onclick은 객체를 클릭하는 이벤트가 발생했을 때를 뜻한 바,  클릭 시 '이 객체의 / style 속성을 / 배경색=오렌지'로 바꾸라는 뜻이 된다.

 

(3)참고 URL - 와니의 IT공부

 

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

 

[JavaScript] HTML DOM 객체 (Document Object Model)