DOM 이란? / Tree 자료구조 (JS)

DOM이란?

문서 객체 모델(DOM, Document Object Model)은  HTML이나 XML 문서에 접근하기 위한 일종의 인터페이스

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

 

DOM에서 가장 많이 사용되는 interfaces 

먼저 window와 Document 객체 (object)는 DOM 프로그래밍에서 가장 자주 사용하는 객체이다.

window는 브라우저와 같다고 할 수 있고, document는 root document 자체라고 할 수 있다.

아래는 DOM을 사용하는 공통적인 API의 대표적인 메소드이다

document.getElementById(id)

document.querySector(#id,.class...)

element.innerHTML

.

.

.

 

이들을 이용해 자바스크립트에서 HTML요소를 선택하기 위해서는 

HTML 태그 이름 (tag name) / 아이디(# id) / 클래스(. class) / name 속성 (attribute) / HTML 객체 집합(object collection)을 이용한다

 

DOM을 이용한 CRUD

CRUD란 (Create : 만들고 , Read : 읽고 , Update : 변경하고 ,  Delete :  삭제하기)

- createElement : Create

- querySelector ,  querySelectorAll, getElementById : Read

- textContent , id, classList , setAttribute : update

- append, appendChild : append

- remove , removeChild, innerHTML = "" ,  textContent = "" : delete

 

Tree 자료구조

DOM의 경우 tree자료구조를 가지고 있다

tree 자료구조란 하나의 뿌리로부터 사방으로 뻗은 형태의 자료구조형으로 나무가 뒤집어있는 모형을 생각하면 좋을 것 같다

 

출처 : 위키백과

트리 용어

- 노드 (Node) : 트리 구조를 이루는 모든 개별 데이터

- 루트 (Root) : 트리구조의 시작점이 되는 노드

- 부모 노드(Parent Node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 가까운 노드

- 자식 노드(Child Node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 먼 노드

- 리프(Leaf) : 트리 구조의 끝지점이고, 자식 노드가 없는 노드

- 깊이(Depth) :  트리 구조에서 루트로부터 하위계층의 특정 노드까지의 깊이(Depth)를 말함. 뿌리 노드는 깊이가 0이다

- 레벨 : 트리 구조에서 같은 깊이를 가진 노드를 묶은 것. 뿌리 노드부터 1로 시작

- 높이 : 리프 노드를 기준으로 해당 노드까지 떨어진 정도

- 서브 트리 : 큰 트리 안에서 비슷한 트리 구조를 가진 작은 트리

 

*Node는 element 보다 상위개념이다.

즉 , element는 node의 유형 중 한 타입이다

---

출처

http://www.tcpschool.com/xml/xml_dom_concept

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://jacobgrowthstory.tistory.com/20?category=950813