분홍분홍 코딩 프로젝트
[Javascript] DOM? Node? 뭐가 다른건데? 본문
DOM과 Node 대체 뭐가 다른걸까..
DOM을 공부하는데 자꾸 node라는게 뒤섞여 나오는데 봐도봐도 혼란스럽다.
그래서 두 용어의 차이를 글로 정리해보았다.
노드(node)
먼저 검색해서 나온 정의들을 다 적어보았다.
1. Node 객체는 DOM에서 시초 역할을 담당한다. 뿌리. 근본. by 생활코딩
2. Node는 여러가지 DOM 타입들이 상속하는 인터페이스이다. by MDN
3. DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. by unknown
노드의 상속 다이어그램이다.
브라우저가 자바스립트에서 사용하기 위해 html 정보를 노드 객체로 변환시켰다.
그 다음 어떤 클래스로 변환이 되고 그 클래스들은 어떤 부모 클래스를 상속하는지를 나타내는 다이어그램이다.
아래 그림은 그 구조를 나타낸 노드 트리(node tree)이다.
이처럼 노드 트리는 최상위에 있는 루트 노드에서 시작하여 최하위에 있는 텍스트 노드(text node)까지로 이어진다.
자바스크립트에서는 html DOM을 이용하여 노드 트리에 포함된 모든 노드트리에 접근이 가능하다고 한다.
노드의 종류
HTML 문서의 모든 것은 노드이다. 즉, 노드(=이 주머니들은)는 모든 html 태그의 정보를 가지고 있다고 할 수 있다!
| 노드 | 설명 |
| 문서 노드(documnet node) | html 문서 전체를 나타내는 노드이다. |
| 요소 노드(element node) | 모든 HTML 요소는 요소 노드에 속하고, 속성 노드를 가질 수 있는 유일한 노드. |
| 속성 노드(attribute node) | 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있다. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다. |
| 텍스트 노드(text node) | HTML문서의 모든 텍스트는 텍스트 노드이다. |
| 주석 노드(comment node) | HTML 문서의 모든 주석은 주석 노드이다. |
노드 간의 관계
그림을 코드로 정리해보면.
<html> // '부모노드'
<head> // html태그의 '첫번 째 자식노드'이자 body태그의 '이전 형제노드'
</head>
<body> // html태그의 '마지막 자식노드'이자 head태그의 '다음 형제 노드'
</body>
</html>이렇게 모든 노드는 계층적으로 관계를 맺고있다.
("저 양반이 강 건너 방앗간 집 아저씨(부모노드) 둘째 아들(자식 노드)이구 그 옆에가 첫 째랴(형제 노드)." 이런 느낌이랄까?)
노드 간 관계의 종류
위에서 본 것처럼 모든 노드는 트리 형태로 계층적 관계를 맺고 있다고 했다.
트리의 모든 요소는 자신만의 텍스트나 속성을 가질 수 있다.
| 관계 종류 | 설명 |
| 루트 노드(root node) | 노드 트리의 가장 상위에 있는 단 하나의 노드! (html태그를 가리킨다) |
| 부모 노드(parent node) | root노드를 제외한 모든 노드는 단 하나의 부모 노드만을 가진다. 유감스럽게도 root node는 부모노드가 없다. 부모 노드는 여러 개의 자식 노드를 가질 수 있다. |
| 자식 노드(child node) | 모든 요소 노드는 자식 노드를 가질 수 있다. 자식 요소는 단 하나의 부모 요소만을 가진다. |
| 형제 노드(sibling node) | 같은 부모 노드를 가지는 모든 노드를 가리킨다. 형제 요소는 같은 트리 레벨에 존재하는 요소를 가리킨다.(div>span+span 이 경우 span 두 개는 형제 노드) 즉, 형제 요소란 같은 부모를 가지는 자식 요소 간의 관계를 말한다. |
API's
이벤트 타겟을 상속하는 노드 덕에 dom 인터페이스들로 다양한 메소드와 프로퍼티들을 쓸 수 있다.
노드 관계 API
노드 객체는 노드 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.
- Node.childNodes
자식노드들을 유사배열에 담아서 리턴한다. - Node.firstChild
첫번째 자식노드 - Node.lastChild
마지막 자식노드 - Node.nextSibling
다음 형제 노드 - Node.previousSibling
이전 형제 노드
노드 변경 API
추가
- appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가 - document.createElement(tagName)
엘리먼트 노드를 추가한다. - document.createTextNode(text)
텍스트 노드를 추가한다.
노드 삭제 API
노드 제거를 위해서는 아래 API를 사용한다. 이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의한다.
- removeChild
정리해보자.
브라우저는 받아들인 정보를 자기가 읽을 수 있도록 html 태그 정보들을 DOM 객체 형태, 노드객체로 저장한다.
이 dom객체들은 node라고 불리는 계층적 단위에 정보를 저장하게 된다.
자바스크립트에서 쓰기위해 브라우저는 html 태그 정보들을 node 객체로 저장을 한다.
즉, html 문서의 모든 것은 node 이기때문에 모든 노드들은 관계가 있고 그 관계를 설명한 것이 DOM이다!!
아,
내일 한번 더 읽어봐야지.
이해가 100% 되진 않았으나 틀은 정확히 잡고가야하니까.
수정과 보충을 더 할 것이지만, 틀린 부분 지적해주시면 제게 큰 환영입니다. :)
'Javascript' 카테고리의 다른 글
| [Javascript] Null과 Undefined가 달라? (0) | 2021.07.27 |
|---|---|
| [Javascript] let, const, 데이터 타입에 따른 데이터 변경방법 (0) | 2021.07.19 |
| [Javascript] 객체 생성 (0) | 2021.05.02 |
| [Javascript] Class와 Object (0) | 2021.04.30 |
| [Javascript] 함수의 종류와 parameter ,argument (0) | 2021.04.11 |
