DOM

Document Object Model의 줄임말로, HTML 문서를 구조화한 트리 자료구조다.

이전 포스팅을 보고 오면 더 쉽게 이해할 수 있다.

노드

DOM을 생성하려면 토큰이 필요하다.
토큰에 노드 정보와 DOM을 어떻게 구조화할 것인지에 대한 정보가 담겨 있기 때문이다.

노드는 총 12종류가 있지만, 중요한 노드 4종류만 알면 된다.

• document 노드
  Dom 트리의 최상단에 위치한 루트 노드로 document 객체를 가리킨다.

  document 객체는 HTML 문서 전체를 가리키는 객체로, window.document 에 바인딩된다.

  

• element 노드
  HTML 문서의 element를 가리키는 노드다.
  parent-child 관계를 통해 정보를 구조화한다.

  ex) ul(parent)-li(child)

• attribute 노드
  HTML 문서의 attribute를 가리키는 노드다.
  attribute 노드는 element 노드와 연결된다.

• text 노드
  HTML 문서의 text를 가리키는 노드다.
  element 노드의 child이며, 리프 노드다.
  또한, element 노드가 문서 구조 를 표현한다면 text 노드는 문서 정보 를 표현한다.

노드의 상속 구조

자바스크립트는 프로토타입 기반의 언어다.
따라서, document, element, attribute, text 도 프로토타입 체인의 일부다.
이번에는 이들의 상속 구조에 대해 알아보자.

만약 li.textContent = "Hello World"; 코드가 있다면, 아래의 프로토타입 체인을 참고해서 실행한다.

DOM API & Web API

브라우저는 자바스크립트가 실행될 수 있는 환경을 제공한다.
이때, DOM API라는 것을 제공하는데 이것으로 DOM과 상호작용할 수 있다.
만약, DOM API를 사용해 DOM 내용을 바꾸면, 리플로우와 리페인트가 일어날 수 있다.

참고로 Web API를 사용하면 브라우저와 상호작용 할 수 있다.

document vs window

• document 객체
  DOM 트리의 최상단에 위치한 루트 노드다.
  모든 DOM API가 여기 저장된다.

• window 객체
  코드가 실행되기 전에 생성되는 전역 객체다.
  DOM API 이외의 API를 사용할 때 참고하는 객체다.

attribute vs property

• attribute

  • attribute 노드가 관리
  • 초기 상태 저장
  • 새로 고침해도 동일한 초기 상태 유지

• property

  • DOM이 관리
  • 최신 상태 저장
  • 유저의 입력에 의해 변한 상태 저장 (새로 고침하면 사라짐)

아래의 예시를 보자.

value 초기
input attribute: "value" , input property: "value"

value property "hi"로 변경
input attribute: "value" , input property: "hi"

id 초기
input attribute: "id" , input property: "id"

id property "bye"로 변경
input attribute: "bye" , input property: "bye"

이처럼 유저 입력과 연관된 property만 DOM이 최신 상태로 관리한다.
유저 입력과 관련 없는 property는 attribute와 동일한 값으로 저장한다.

DOM Traversing

parent, child, sibling만 기억하자.

• Node
  • parentNode, previousSibling, nextSibling, firstChild, lastChild, childNodes
  • text 노드 + element 노드
• Element
  • 나머지
  • element 노드

아래의 예시를 보자.

parentNode, parentElement

parent는 element 노드가 하나라 둘 중 아무거나 사용하면 된다.

둘의 차이는 아래 코드에서 드러난다.

previousSibling, previousElementSibling

previousSibling은 text 노드까지 포함된 값이다.
즉, <li>first</li> 와 <li>second</li> 사이의 공백 문자까지 포함된다.

nextSibling, nextElementSibling

previousSibling, previousElementSibling과 개념적으로 동일하다.

childNodes, children

childNodes는 text 노드까지 포함된 값이다.
즉, <li>first</li> , <li>second</li> , <li>third</li> 사이의 공백 문자까지 포함된다.

childNodes는 NodeList에 담기고, children은 HTMLCollection에 담긴다.