자바스크립트 개발자가 알아야할 33가지 개념[#13. DOM and Layout Trees]

웹 개발은 웹 브라우저와 밀접한 연관이 있다.

모든 서비스는 사실 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아니다.

이 브라우저와 관련된 객체 모델(Browser Object Model, BOM)이라고 하고 BOM을 이용해 브라우저 관련된 기능을 구성한다.

DOM은 이BOM중 하나이다.

 

DOM (Document Object Model)

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이를 객체를 부자 관계를 표현 할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

 

이러한 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공된다. 이를 DOM API(Application Programming Interface)라고 부른다.

달리 말하면 정적인 뉍페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드 집합인 DOM API다.

 

DOM은 다음 두 가지 기능을 담당한다.

• HTML 문서에 대한 모델 구성
  : 브라우저는 HTML문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.
• HTML 문서 내의 각 요소에 접근 / 수정
  : DOM은 모델 내의 각 객체에 접근하고 수정항 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.

 

DOM tree

DOm tree는 브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다.

DOM tree는 네 종류의 노드로 구성된다.

 

• 문서 노드 (Document Node)
  트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. DOM tree에 접근하기 위한 시작점(entry point)이다.
• 요소 노드 (Element Node)
  요소 노드는 HTML 요소를 표현한다. HTML요소는 중첩에 의해 부자 관계를 가지며 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술 한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.
• 어트이뷰트 노드 (Attribute Node)
  어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정 할 수 있다.
• 텍스트 노드 (Text Node)
  텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

 

DOM 구조로 얻는 이점

사용자에 의해 얼마든이 페이지의 데이터를 업데이트하거나, 레이아웃 등을 refresh의 과정없이 커스터마이징할 수 있다.

 

DOM의 문제점

DOM은 동적 UI에 최적화 되어 있지 않다.

DOM 자체를 읽고 쓸 때, 성능은 자바스크립트 객체를 처리할 때 성능과 비교해서 크게 차이나지 않는다.

단, 브라우저 단에서 DOM 변화가 일어나면 브라우저가 HTML, CSS를 다시 연산한 다음 레이아웃을 구성하고 웹페이지를 다시 그리는 과정에서 시간이 소요된다.

이 문제를 해결 하기 위해 최소한의 DOM조작을 통해서 작업을 처리하는 방식으로 개선할 수 있다.

React는 가상의 DOM 방식을 사용하므로써 DOM 업데이트를 추상화해서 DOM처리 횟수를 최소화하는 방식을 취하고 있다.

 

 

DOM in JavaScript

문서 객체가 생성되는 방식은 크게 두가지로 볼 수 있다.

  1. 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으며 생성

  2. HTML에 없던 문서 객체를 JS를 이요해서 생성

 

1번은 문서 객체를 정적으로 생성하는 과정이고 2번은 문서 객체를 동적으로 생성하는 과정이다.

 

BOM API

DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성허고, 조작할 수 있어야 한다.

 

노드 추가

• appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트에 맨 마지막에 노드로 추가함
• insertBefore() : 새로운 노드를 특정 노드 바로 앞에 추가함.
• insertData() : 텍스트 노드의 텍스트 데이터에 새로운 텍스를 추가함.

 

노드 생성

• createElement() : 새로운 요소 노드를 생성함.
• createAttribute() : 새로운 속성 노드를 생성함.
• createTextNode() : 새로운 텍스트 노드를 생성함.

 

 

노드 제거

• removeChild() : 기존의 노드 리스트에서 특정 노드를 제거
• removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거함

 

 

노드 복제

• cloneNode() : 메소드를 사용하여 노드를 복제한다.

 

 

노드 값 변경

nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다.

또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다.

 

 

노드의 교체

replaceChild() 메소드를 사용하면 특정 노드 그 자체를 다른 노드로 바꿀 수 있다.

 

 

 

 

 

 

---

참고 및 출처

• https://poiemaweb.com/js-dom
• http://www.tcpschool.com/ajax/ajax_basic_domApi
• https://corock.tistory.com/471​