DOM & BOM

웹 사이트에는 크게 세 가지 요소로 구성이 됩니다.

html

웹페이지의 제목, 이미지, 표 등을 정의하고

구조와 의미를 부여하는 정적 언어로 웹에 전체적인 구조를 담당하고

 

css

html이 실제 표시되는 방법 색상, 레이아웃, 크기 폰트들을 지정하여

콘텐츠를 꾸미는 정적언어이며 웹의 시작적인 표면을 담당합니다.

 

js

html의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로

웹문서를 더욱 동적으로 처리할 수 있도록도와줍니다.

 

DOM (Document Object Model)

- 문서에 대한 모든 내용을 담고 있는 객체이고

- 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것

- HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 구조로 구성한 것

- HTML XML 문서의 프로그래밍 interface입니다.

- 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍이고

언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와줍니다.

 

노드 객체는 각각 종류가 있고 상속 구조를 갖습니다.

노드 객체는 총 12개의 종류가 있는데

이 중 가장 중요한 노드 타입 4가지에 대해서 알아보도록 하겠습니다.

 

문서 노드 (document node)

- DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리키고

- HTML 문 서다 document 객체는 유일합니다.

- DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 합니다.

- 즉 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 합니다.

 

요소 노드 (element node)

- HTML 요소를 가리키는 객체입니다.

- HTML 요소 간의 중첩에 의해 부자관계를 가지며 이 부자관계를 틍해 정보를 구조화합니다.

- 즉 요소 노드는 문서의 구조를 표현합니다.

 

어트리뷰트 노드(attribute node)

- HTML 요소의 어트리뷰트를 가리키는 객체입니다.

- 어트리뷰트 노드는 지정한 HTML 요소의 요소 노드와 형제 관계를 갖습니다. (부모노드와는 연결 x)

- 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 형제 노드인 요소 노드에 접근해야 합니다.

 

택스트 노드(text node)

- HTML 요소의 텍스트를 가리키는 객체입니다.

- 문서의 정보를 표현합니다.

- 텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드입니다.

- 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 합니다.

 

DOM은 브라우저에서 제공하는 API 중 하나입니다.

DOM API를 이용해 자바스크립트로 웹 페이지를 동적으로 조작할 수 있습니다.

대표적인 DOM API로는

document.querySelector()

Node.appendChild()

Node.removeChild()

가 있습니다.

 

BOM (Browser Object Model)

- 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델

- 대부분의 브라우저에서 구현되어 있지만, 정의된 표준이 없어 브라우저 제작사마다 세부사항이 다릅니다.

- Window 객체는 자바스크립트의 최상의 객체이자 전역 객체이면서 모든 객체가 소속된 객체로

    a. var 키워드로 선언한 일반 변수도 모두 window 객체의 속성이 됩니다.

    b. 최상위 객체이기 때문에 생략 가능합니다.