DOM

yoo chang heon·2022년 3월 31일
0

Web

목록 보기
3/6

DOM(Document Object Model)

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
HTML을 직접 수정하거나 추가, 제거 할 수 있다.

DOM Tree

DOM은 Tree구조로 이 트리는 4개의 노드로 이뤄진다.

  • 문서 노드(document) :최상위 객체로 문서 전체를 나타내는 노드
  • 요소 노드(element): HTML 요소(tag)는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드이다.
  • 속성 노드(attribute): HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있다. 하지만 해당 요소으 ㅣ자식노드에는 포함되지 않는다.
  • 텍스트 노드(text): HTML 문서의 모든 텍스트 (자식을 가질 수 없음, leaf node)

DOM tree는 전위순회

DOM Tree 생성

브라우저 렌더링


HTML 파일을 HTML 파서에서 파싱을 하여 DOM Tree를 생성한다. CSS파일 또한 CSS 파서에서 파싱되어 CSSOM(css객체모델)을 생성한다.


이 둘을 합치는 Attachment를 거쳐 Render Tree를 만든다.

DOM 선택

  • getElementById: 맨 처음 일치하는 id를 리턴
  • getElementByClassName: 맨 처음 일치하는 class를 리턴
  • getElementByTagName: 일치하는 모든 요소 list로 리턴
  • querySelector: 맨 처음 일치하는 query 리턴
  • querySelectorAll: 일치하는 모든 요소 list로 리턴
  • window['id']: 일치하는 모든 요소 list로 리턴 (전역으로 접근하기 때문에 사용을 권장 x)

DOM 탐색

  • first(last)ElementNode: 자식 중 첫번째(마지막) 노드 리턴(없으면 null)
  • children: 모든 자식 리턴
  • nextElementSibling: 선택 요소의 다음 형제 요소 노드
  • priviousElementSibling: 선택 요소의 이전 형제 요소 노드

DOM 조작

  • hasAttribute: 속성을 가지고 있는지
  • getAttribute: 속성을 받음
  • setAttribute: 속성을 부여함
  • removeAttribute: 속성 제거
  • textContent: text에 접근
  • innerHTML: 내부 HTML 요소에 접근(XSS위험, 사용지양)
  • createElement: 요소 생성
  • appendChild: 요소에 child 추가
  • removeChild: child 제거

Virtual DOM

만약 한번에 100개의 DOM 객체를 수정한다면 위의 브라우저 렌더링 과정을 100번을 해야 한다. (DOM을 변경하는 것이 문제가 아닌 렌더링을 여러번 하는 것이 문제)

VirtualDOM이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 변경사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해 DOM을 수정한다.
Virtual DOM은 수정사항이 여러가지 있더라도 한번만 렌더링을 일으킨다.

오해

대부분의 상황에서 Virtual DOM은 더 빠르지 않다. 브라우저의 렌더링 횟수만 줄여줄 뿐 Virtual DOM을 조작한 후 DOM을 조작해야 하기 때문에 DOM을 직접 조작하는 것보다 느리다. 또한 Virtual dom도 생성해야 하기 때문에 메모리도 2배로 든다. (다만 극소수의 상황으로 DOM조작이 너무 빈번하게 일어날 경우 한번에 DOM으로 보내는것이 더 효율적일 수도)

장점

하지만 데이터 흐름과 구성을 일관되게 해줘 개발 편의성을 높여준다.


Document.createDocumentFragment()

새로운 DOucmentFragment를 생성하는 함수이다.
DocumentFragment는 DOM노드들이다. 하지만 이것들은 메인 DOM트리의 일부가 되지 않고 일반적으로 document 조각을 생성하고 element를 이 조각에 추가하여 이 document 조각을 DOM트리에 추가한다.
다시 말해 다른 노드를 담는 임시 컨테이너 역할을 하는 특수 목적의 노드이다. 가상의 노드 객체로 메모리상에서만 존재하는 비문서 탬플릿으로 parentNode의 프로퍼티는 항상 null이지만 요소처럼 appendChild() 같은 메소드로 조작할 수 있는 자손 객체를 가질 수 있다.
미리 메모리 상에 특정 노드의 형태를 생성해 놓은 뒤 그 노드를 실제 DOM에 추가해서 사용하고 싶을때에 추가하면 실제로 적용된다. 메모리상에서만 형태가 존재할 경우에는 적용이 안된 상태이고 아무런 존재감도 없다.

0개의 댓글