티스토리 뷰

프론트엔드/DOM

[DOM] ② DOM Node

doeunnkimm 2022. 7. 26. 12:49

▶Node

노드 인터페이스는 전체 문서의 요소들에 대한 객체 형태의 기본 형태의 기본 데이터 타입입니다.

DOM 트리의 구성 요소를 나타내며 nodeType이나 nodeName, nodeValue, 자식 노드와 형제 노드에 대한 관계 등 여러 정보를 갖습니다.

또한 appendChild(), removeChild() 같은 노드 조작 메서드 등을 사용할 수 있습니다.

 

1) 노드의 계층구조

노드의 계층구조

노드 인터페이스는 트리 형태의 계층 구조가 존재합니다.

위 그림에서 알 수 있듯이 계층 구조의 제일 꼭대기에는 EventTarget이 존재합니다.

이 EventTarget 추상 클래스는 이벤트가 발생했을 때 대상이 되는 타깃을 의미합니다.

Node는 EventTarget을 상속받은 추상 클래스로 DOM 노드의 기초가 되며, DOM 노드의 관계를 나타내는 기능들이 포함됩니다.

차례대로 Element, Text, Comment는 Node 추상 클래스를 상속방아 구현됩니다.

 

Element는 DOM 요소 생성의 가장 기본이 되는 클래스로 요소 탐색(querySelector(), getElementsByName() 등)부터 이벤트 리스너 관리(addEventListener(), removeEventListener()) 등 여러 메서드를 제공합니다.

HTMLElement는 Element를 상속받아 HTML 요소를 구현한 기본 클래스이며, 이 HTMLElement를 상속받아 HTMLDivElement, HTMLInputElement, HTMLLabelElement 등 다양한 HTML 요소를 구현하게 됩니다.

 

예를 들어 <select> 요소를 생성한다면 HTMLSelctElement 클래스를 기반으로 생성될 것이며, 이 클래스는 다음 그림과 같은 클래스를 상속받아 구현됩니다.

HTMLSelectElement가 상속받은 클래스

또한 상속 여부는 instanceof를 통해 쉽게 확인할 수 있습니다.

<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>

<script>
const select = document.querySelector('select');

console.log(select instanceof HTMLSelectElement); // true
console.log(select instanceof HTMLElement); // true
console.log(select instanceof Node); // true
console.log(select instanceof HTMLInputElement); // false
</script>

 

2) nodeType, nodeName, nodeValue

노드는 nodeType(12개의 노드 타입을 정수로 나타냄), nodeName(노드의 이름), nodeValue(노드의 값) 등 여러 프로퍼티를 갖습니다.

다음 표는 대표적으로 사용되는 몇 가지 타입들과 프로퍼티에 대해 정리하였습니다,

Constant nodeType nodeName nodeValue 설명
ELEMENT_NODE 1 요소 태그 이름
("DIV", "SPAN", "INPUT"..."		 null <div>나 <span> 같은
HTML 요소 노드
TEXT_NODE 3 #text 포함된 텍스트 Element나 Attr 노드에
담긴 실제 Text 노드
COMMENT_NODE 8 #commnet 주석 컨텐츠 <!-- -->로 작성된
Comment 노드
DOCUMENT_NODE 9 #document null Document 노드
DOCUMENT_TYPE_NODE 10 Dovtype 이름("html"...) null <!DOCTYPE html>
같은 Doctype 반환
DOCUMENT_
FRAGMENT_NODE		 11 null null DocumentFragment
노드

 

3) DOM 프로퍼티

DOM의 프로퍼티에 접근할 경우 자바스크립트 객체 접근 방식과 동일하게 점 표기법과 괄호 표기법 모두 사용할 수 있습니다.

<input type="checkbox" checked />

<script>
const inputElem = document.querySelector('input');

console.log(inputElem.checked); // true
</script>

미리 정의된 프로퍼티가 아닌 새로운 프로퍼티를 DOM 요소에 지정하고 싶을 경우 자바스크립트 객체에 프로퍼티를 지정하는 것과 동일한 구문으로 작성하면 됩니다.

각 노드는 어떤 프로퍼티든 가질 수 있으며 내장 프로퍼티에 접근할 경우 대소문자에 맞춰 작성되어야 합니다.

document.body.customData = {
	date: '2020-12-25',
   	name: 'Christmas',
   	sayHelloWorld: function() {
   		console.log('Hello world!');
    }
}

documnet.body.customDate.sayHelloWorld(); // Hello world!

하지만 DOM 노드에 커스텀 프로퍼티를 할당해 사용하는 것은 다른 요소 사용 시 혼란을 줄 수 있어 권장하지 않습니다.

 

4) Node 사이의 관계

최상위 노드를 제외한 모든 DOM 트리의 노드는 각각 하나의 parent를 갖습니다.

또한 노드는 여러 개의 child를 가질 수 있습니다.

이렇게 같은 parent를 가진 노드의 관계를 sibling이라 합니다.

노드 간 형제 부모 관계

DOM 트리에서 갖는 계층 관계를 노드에서 프로퍼티로 제공하며, 이를 이용해서 DOM 트리의 각 노드를 탐색할 수 있습니다.

해당 프로퍼티의 반환 값은 모두 읽기 전용입니다.

  • parentNode : 부모 노드를 반환합니다.
  • childNode : 요소의 자식 노드를 반환합니다. 반환형은 NodeList입니다.
  • firstChild : 자식 노드 중 첫 번째 자식을 반환합니다. 자식이 없을 경우 null을 반환합니다.
  • lastChild : 자식 노드 중 마지막 자식을 반환합니다. 자식이 없을 경우 null을 반환합니다.
  • nextSlibling : 부모의 childNode 목록 중 자신 다음에 있는 노드를 반환합니다. 없을 경우 null을 반환합니다.
  • previousSlibling : 부모의 childNode 목록 중 자신 이전에 있는 노드를 반환합니다. 없을 경우 null을 반환합니다.

프로퍼티를 통해 전체 노드를 순회할 수도 있습니다.

documnet.body.childNodes.forEach((node) => {
	console.log(node); // DIV, TEXT, ...
});

위의 프로퍼티들은 항상 현재의 DOM 상태를 반영합니다.

만약 해당 프로퍼티들을 통해 노드를 참조하고 있다면 새로운 DOM 노드가 추가, 제거될 떄 같이 변경되므로 주의해서 사용해야 합니다.

반환되는 NodeList는 살아있는 유사 배열 객체입니다.

 

여기까지 DOM Node에 대해 알아보았습니다 :)

728x90
LIST

'프론트엔드 > DOM' 카테고리의 다른 글

[DOM] ⑤ DOM 이벤트  (0) 2022.07.29
[DOM] ④ DOM 요소 검색하기  (0) 2022.07.27
[DOM] ③ DOM Node 추가·제거  (0) 2022.07.27
[DOM] ① DOM 트리  (0) 2022.07.25
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함