[Javascript] DOM이 뭘까? DOM과 DOM트리 구조 + 노드 Node 종류

 
학원을 다니거나, 면접을 다니다보면 "dom에 대해서 아세요?"라는 질문을 들어본 적이 한번씩은 있을 것이다.
물론 나도 면접 볼 때 들어봤고.. 하지만 DOM이라는 단어만 알았지, DOM에 대한 상세한 정보는 몰랐다.
 
오늘은 DOM구조에 대해 알아보려고 한다.

---

DOM 트리란?

DOM 트리란? 웹 페이지의 모든 요소를 Document 객체가 관리하게 된다. 따라서 웹 페이지의 요소들을 관리하고,
제어하기 위해서는 Document 객체가 웹 페이지 요소들을 잘 반영하는 자료구조를 가지고 있어야한다. 
Document 객체 모델인 DOM은 트리 자료 구조 형태를 가지고 있다. 트리 자료 구조는 HTML 문서를 읽어 들이고 제어하기 가장 좋은 자료구조이다.

(Document란? 웹 페이지 그 자체를 의미함)
 

DOM 이란?

DOM이란? Document Object Model의 줄임말이다. 

 

웹 브라우저가 HTML 문서를 읽어들이면 위에 그림처럼 Document 객체로 시작하는 트리가 만들어진다.

노란색 배경 => 루트 

 주황색 배경 => 조상 

초록색 배경 => 부모 

파란색 배경 => 형제

 

Document 객체의 메소드

• document.getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택한다. 배열로 값이 들어감
• document.getElementById() : 해당 아이디의 요소를 선택함
• document.getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택함
• document.getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택한다.
• querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택한다.

Dom 요소 내용 변경

HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 사용하면 쉽게 변경이 가능하다.

---

 

노드(Node)란?

트리 구조에서는 트리를 구성하고 있는 객체 하나마다 '노드(Node)'라고 부르며 계층적 단위에 정보를 저장한다.
dom은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해주는 역할을 하며, 노드트리라고 불리는 구조에 저장된다.
노드트리는 노드들의 집합이며 노드간의 관계를 보여준다.
 
가장 기본인 노드 다섯 가지를 정리해보겠다.

노드 종류	설명
문서노드	노란색 배경으로 표현된 제일 위에 있는 Document가 문서노드이다. 트리의 최상위 계층이면서 전체 문서를 가르킨다. Document로 참조할 수 있고, Dom트리로 웹 페이지를 접근하는 시작점이다.
요소노드	초록색 배경으로 표현된 노드들이 요소 노드이다. html태그에 해당하는 요소이며, 속성 노드와 텍스트 노드를 자식으로 가질 수 있다.
텍스트노드	파란색 배경으로 표현된 노드들이 텍스트 노드이다. html 태그 안에 있는 텍스트들이 텍스트 노드이며, 요소 노드와 달리 자식 노드를 가질 수 없다.
속성노드	속성은 모두 속성노드이며, 요소노드에 관한 정보를 가지고 잇음
주석노드	HTML 주석은 모두 주석노드이다.

 
트리 자료 구조에서는 기준보다 위에 있는 노드를 부모노드라고 부르고, 같은 층 위에 존재하는 옆에 노드를 형제노드라고 부른다. 부모노드보다 위에 있는 노드를 조상노드, 최상위에 더 이상 부모 노드가 없는 노드를 루트(뿌리)라고 한다.
 

노드(Node)의 관계 종류

• parntNode(부모노드)
• childNodes(자식 노드 리스트)
• firstChild(첫번째 자식 노드)
• listChild(마지막 자식 노드)
• nextSibling(다음형제노드)
• previousSibling(이전 형제 노드)

 

노드(Node)의 대한 정보

• nodeName : 노드 고유의 이름을 저장한다. 읽기전용 프로퍼티라고 보면된다.
• nodeValue : 노드의 값을 저장한다.
• nodeType : 노드 고유의 타입을 정수로 저장하고 있다(읽기) [ 요소1 / 속성2 / 텍스트3 / 주석8 / 문서9 ]

노드(Node) 추가 방법

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

노드(Node) 생성 / 제거 / 복제

생성

1. createElement() : 새로운 요소 노드를 만들기
2. createAttribute() : 새로운 속성 노드를 만들기
3. createTextNode() : 새로운 텍스트 노드를 만들기

제거

1. removeChild()  : 자식 노드 리스트에서 특정 자식 노드를 제거하고, 성공적으로 제거가 되면 반환해준다. 노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다같이 제거됨.

복제

1. cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성하고 반환해준다.
2. cloneNode(true) : 복제되는 노드의 모든 속성과 자식노드도 같이 복제된다.
3. CloneNode(false) : 속성 노드만 복제하고 자식 노드를 복제하지 않는다.