DOM & BOM

웹사이트는 크게 HTML, CSS, JS(javascript) 세 가지로 구성되어 있다고 할 수 있다. HTML은 웹페이지의 제목,

이미지, 표 등을 정의하고 구조와 의미를 부여하는 정적언어로 웹의 전체적인 구조를 담당하고 있으며

CSS는 HTML이 실제  표시되는 방법, 색상, 레이아웃, 크기, 폰트 등을 지정하여 시각적인 표면을 담당하고

JS는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹문서에서 동적인 처리들이

가능하도록 한다. 정리하자면 HTML로 뼈대를 만들고 CSS로 옷을 입히고 JS로 기능을 추가한다고 할 수 있다.

 

그렇다면 어떻게 JS는 확장자가 다른 HTML과 CSS 파일의 내용을 읽고 수정할 수 있는가 하면 그 답은 DOM에 있다.

DOM(Document Object Model)은 문서(XTML,HTML,XML)에 대한 모든 내용을 담고 있는 객체로 텍스트 파일로

만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것으로 HTML 요소간의 부자 관계를 반영하여

모든 노드들을 트리 구조로 구성한 것이다. 이는 문서의 구조화된 표현을 제공하여 프로그래밍 언어가

DOM 구조에 접근하여 문서의 구조, 스타일, 내용등을 변경할 수 있게 도와준다.

 

HTML의 요소는 문서를 구성하는 개별적인 요소를 의미하며 Attribute는 Attribute노드로 텍스트 컨텐츠는

텍스트 노드로 변환된다. 트리 구조를 가진 DOM은 노드 객체의 계층적인 구조로 구성되며 노드 객체에는

각각 종류가 있고 상속 구조를 가지게 된다.

 

문서 노드(document node)

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

유일하다. 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 하기 때문에 요소, 어트리뷰트,

텍스트 노드 등에 접근하려면 문서 노드를 통해야 한다.

 

요소 노드(element node)

- HTML 요소를 가리키는 객체로 요소 간의 중첩에 의해 부자관계를 가지며 정보를 구조화하고 문서의 노드를 표현한다.

 

어트리뷰트 노드(attribute node)

- HTML 요소의 어트리뷰트를 가리키는 객체로 지정된 요소의 요소 노드와 형제 관계를 가지고 어트리뷰트 노드에

접근하여 해당 속성을 참조하거나 변경하려면 먼저 형제 노드인 요소 노드에 접근해야 한다.

 

텍스트 노드(text node)

HTML 요소의 텍스트를 가리키는 객체로 문서의 정보를 표현한다. 텍스트 노드는 요소 노드의 자식 노드이며,

자식 노드를 가질 수 없는 리프 노드이고 해당 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.

 

DOM api를 통해 노드를 읽고 시작하기 위해서는 노드를 취득할 필요가 있으며 이때 자주 사용되는 것이

getElementxxx(ByTagName, ByClassName, ById)와 querySelector이다.

getElement로 시작하는 태그 네임과 클래스 네임 등은 html 컬렉션을 말하고 querySelectAll은 노드 리스트를 반환하며

이들의 공통점은 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체라는 것이다.

 

노드를 삽입하는 경우 사용되는 것으로는 아래와 같은 것들이 있다.

innerHTML

- 쉽고 간단하게 새로운 요소를 추가할 수 있으나 기존 요소 노드의 모든 자식 노드를 제거하고 할당한 문자열을

파싱 하여 DOM을 변경한다. 또한 요소와 요소 사이에 새로운 요소를 삽입하기 어려우며 크로스 사이트 스크립팅

공격에 취약하다.

 

insertAdjacentHTML

- innerHTML의 단점을 보완하기 위해 만들어졌으며 기존 요소를 제거하지 않으면서 위치를 지정해 추가 가능하며

기존 자식을 모두 제거하고 새로 생성하는 innerHTML보다 빠르지만 크로스 사이트 스크립팅 공격에 취약하다.

 

appendChild

- 기존 요소를 제거하지 않으면서 위치를 지정해 추가 가능하며 위의 두 가지 방법과 비교하여 보안 이슈가 없지만

자식 노드를 생성해야 한다는 단점이 있다.

 

웹페이지를 작성할 때 CSS 태그를 상단에 위치시키는 이유로는 사용자가 흰 화면을 응시하는 시간을 줄이고

(CSS는 렌더링 차단 리소스로 취급되기 때문) Link를 이용하여 스타일 시트를 다운로드하는 경우 최대한 빠르게

다운 받기 위해서 이다. 또한 Script 태그를 하단에 위치시키는 이유로는 HTML 파서는 script 태그를 만나면

파싱을 멈추고 스크립트를 읽기 때문에 웹페이지의 로딩이 지연될 수 있고 생성되지 않은 DOM 노드를 읽거나

조작하는 것이 불가능하기 때문에 예상치 못한 오류가 발생할 수 있기 때문이다.

 

BOM(Browser Object Model)은 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델로 대부분의 브라우저에서

구현되어 있지만, 정의된 표준이 없어 브라우저 제작사마다 세부사항이 다르게 적용된다.

Window 객체는 자바스크립트의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 객체로 var 키워드로 선언한

일반 변수도 모두 window 객체의 속성이 되고 최상위 객체이기 때문에 생략이 가능하다.

 

document 객체는 window객체 안에 포함되며 이는 DOM은 BOM에 포함되는 관계라는 것을 나타내며

때문에 DOM api를 통해 노드 요소를 불러올때 윈도우를 앞에 붙여도 정상적으로 실행된다.

 

 

 

출처) https://www.youtube.com/watch?v=q1fQnGG1bgU