DOM & BOM 이해하기

 

1. DOM은 왜 필요할까?

 

 

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

 

 먼저, HTML은 웹 페이지의 제목, 이미지, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담당하고 있습니다.

 

 

 두번째로, CSS는 HTML이 실제 표시되는 방법 (색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠를 꾸미는 정적 언어이며 웹의 시각적인 표현을 담당합니다.

 

 

 마지막으로 Javascript는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줍니다.

 

 

 여기까지는 웹을 조금이라도 공부하셨던 분이라면 대부분 알고 있는 내용이라고 생각됩니다. 그러나 혹시 이런 생각을 해보신 적 있나요? 자바스크립트에서 어떻게 확장자가 다른 HTML과 CSS 파일의 내용을 읽고 수정할 수 있는가…에 대해서 말입니다. 워드에서는 한글 파일을 읽을 수 없고 마찬가지로 한글에서도 워드 파일을 읽을 수 없습니다. 그런데 자바스크립트는 어떻게 이것이 가능할까요?

 

 

 여기에 대한 해답은 바로 DOM에 있습니다. Document Object Model 우리말로 문서 객체 모델이 이를 가능하게 해줍니다. DOM은 다음과 같은 특징을 가지고 있습니다.

 

• 문서에 대한 모든 내용을 담고 있는 객체 (문서는 HTML, XML을 의미)

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

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

• 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움

 

 

 

HTML 요소의 구조

 

 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미합니다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됩니다. 이 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됩니다.

 

 

 

HTML 요소와 노드의 객체

 

 

 

 

 이런 HTML 요소들이 들어있는 HTML 문서를 렌더링 엔진이 파싱하여 다음과 같이 노드 객체들로 구성된 트리구조를 가진 DOM을 생성합니다. 이처럼 DOM은 노드 객체의 계층적인 구조로 구성됩니다. 노드 객체는 각각 종류가 있고 상속 구조를 갖습니다. 노드 객체는 총 12개의 종류가 있는데 오늘은 이 중 중요한 노드타입 4가지에 대해서 알아보겠습니다.

 

 

 

 

 

문서 노드 (document node)

• DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.

• HTML 문서당 document 객체는 유일하다.

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

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

 

요소 노드 (element node)

• HTML 요소를 가리키는 객체다.

• HTML 요소 간의 중첩에 의해 부자관계를 가지며, 이 부자관계를 통해 정보를 구조화한다.

• 즉, 요소 노드는 문서의 구조를 표현한다.

 

어트리뷰트 노드 (attribute node)

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

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

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

 

텍스트 노드 (text node)

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

• 문서의 정보를 표현한다.

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

• 텍스트 노드에 접근하려면 먼저 부도 노드인 요소 노드에 접근해야 한다.

 

 

 

노드 객체의 상속 구조

 

 

 노드 객체도 자바스크립트의 객체이므로 프로토타입에 의한 상속 구조를 갖습니다. 지금 보시는 그림과 같이 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속 받습니다. 여기서 eventTarget은 이벤트와 관련된 예를들어 addEventListenter와 removeEventListener 등과 같은 기능을 제공합니다. 따라서 사실상 모든 HTML 요소에 eventListenter를 추가할 수 있습니다. 또, parentnode나 childNodes 등과 같은 노드 관련 기능은 Node 인터페이스가 제공합니다. 이를 좀 더 쉽게 이해하기 위해서 input 요소를 예로 들어보겠습니다.

 

 

 

 

 

 

 위의 표를 보면 input 요소 노드가 Object에서부터 시작하며 HTMLInputElement까지 상속받는 것을 확인할 수 있습니다. 정말 그런지 '행운의 로또' 웹 페이지에서 구매 금액을 입력 받는 input으로 확인해보겠습니다. 크롬 개발자 도구에서 input을 클릭하고 elements 패널 우측의 properties 패널을 누르면 노드 객체의 상속구조를 확인할 수 있습니다. 구입할 금액을 입력하는 input은 다음과 같은 상속구조를 가짐을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

2. DOM API

 우리는 브라우저에서 제공하는 DOM API를 통해 우리가 원하는 대로 DOM을 찾고 조작할 수 있습니다. 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고 이 때, 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API입니다.

 

 

 DOM API의 대표적인 예로는 document.querySelector와 node.appendChild, node.removeChild 등이 있습니다.

 

 

 

 

 

3. BOM

 이제 마지막으로 BOM에 대해 알아보겠습니다. BOM은 Browser Object Model를 의미합니다. 그리고 다음과 같은 특징을 가지고 있습니다.

 

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

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

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

 

 

다음은 BOM의 대표적인 객체들입니다.

 

 

 

 여기서 Window 객체는 자바스크립트의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 객체입니다. 주목할만한 점은 var 키워드로 선언한 일반 변수도 모두 window 객체의 속성이 됩니다. 밑의 코드를 보면 var 키워드로 선언한 course에 frontend를 할당했습니다. 그런데 window.course로 콘솔을 찍어도 정상적으로 출력되는 것을 확인할 수 있습니다.

 

 

 

 또한 우리가 쓰고 있던 자바스크립트와 브라우저에서 제공하는 API의 메소드 앞에 window를 붙여도 정상적으로 실행되는 것을 확인할 수 있습니다. 원래는 window를 붙이고 쓰는 것이 옳은 방법입니다. 그러나 window가 모든 객체의 최상위 객체이기 때문에 window를 매번 써주기는 번거롭습니다. 따라서 불필요한 코드 작성을 줄이기 위해 일반적으로 window를 생략하여 코드를 작성하는 것입니다.

 

 

 

 

 

 다음으로 주목할 것은 window 밑의 document 객체 입니다. 어라? 어디서 많이 본 것 같지 않나요? 맞습니다. Document 객체는 DOM 트리의 최상단 객체입니다. 따라서 DOM은 BOM에 포함되는 관계입니다. 때문에 DOM API를 통해 노드 요소를 불러올 때도 window를 앞에 붙여도 정상적으로 실행되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

4. 마무리

 DOM과 BOM은 우리가 너무나도 익숙하게 사용해왔지만 막상 그 정체에 대해 잘 모르는 경우가 많습니다. DOM을 잘 이해하고 DOM API을 많이 알고 있다면 우리는 불필요한 코드를 작성하지 않고도 쉽게 HTML, CSS 요소를 조회하고 조작할 수 있습니다. 특히, 프론트엔드 개발자라면 DOM에 대해 더 많이 알수록 더 쉽고 강력하게 많은 일들을 해내실 수 있을 겁니다!

 

이상으로 DOM과 BOM에 대한 설명을 마치겠습니다.

감사합니다 :)

 

 

 

 

 

 

참고

웹 페이지

• https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

• https://poiemaweb.com/js-dom

• http://www.tcpschool.com/ajax/ajax_basic_domApi

도서

• 모던 자바스크립트 deep dive (이웅모 지음)