DOM 트리
DOM의 기본 개념을 기반으로 문서의 계층 구조를 그림으로 나타낸 것을 DOM 트리라 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<h1 id="title">DOM(Document Object Model)</h1>
<h2 id="sub-title">문서 객체 모델</h2>
<script src="index.js"></script>
</body>
</html>
위의 코드 계층 구조를 그림으로 나타내면 아래와 같다.
이때 그림에 나타낸 박스 하나하나를 노드라 부르고
위아래 계층 구조에 부모 자식 관계, 좌우 계층 구조에 형제 관계가 맺어진다.
+ Node type)
각 노드의 성격에 따라 노드를 분류한 것을 노드 타입이라고 하는데 총 12가지가 있다.
주로 사용하는 것은 4가지이다.
- 요소 노드 : html 태그에서 만들어지며 dom 트리를 구성하는 블록이 되는 노드
- 텍스트 노드 : 오로지 텍스트로만 이루어진 노드
- 문서 노드 : dom의 진입점이 되는 document 노드
- 주석 노드 : 화면에 보이지는 않지만, 정보를 기록하고 js를 사용해 이 정보를 dom으로부터 읽을 수 있는 노드
텍스트 노드는 위의 그림에서 회색 노드들을 말하며 이들은 요소 노드의 자식 노드가 되는 것만 가능하고 자신의 자식 노드를 가지는 것은 불가능하다. 트리의 가장 끝 부분이 되므로 잎 노드(leaf node)라고도 한다.
DOM 트리 탐색
DOM 계층 구조를 이용해 노드에 접근하는 방법
| 프로퍼티 | 유형 | 결과 |
| element.children | 자식 요소 노드 | element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
이 프로퍼티들은 노드 중에서도 '요소 노드'인 경우에만 존재하는 프로퍼티이다. 텍스트 노드에 접근하고 싶을 땐 element를 빼고 사용하면 된다. element를 빼고 사용할 때 주의할 점은, 코드 상에서 가독성을 위해 개행을 한 경우에도 text노드가 생성이 되기 때문에 의도치 않은 노드를 선택하게 될 수 있다. 그래서 실무에서는 element를 빼고 사용하지 않는 편이라고 한다.
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 id="title-1">Cat-1</h1>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
</ul>
</div>
<script>
const myTag = document.querySelector('#list-1');
console.log(myTag); //list-1 리스트 모두 출력
//형제 요소 노드
console.log(myTag.previousElementSibling); //h2 Cat-1
//list-1은 ul 태그이고 ul과 h2가 형제이므로
//부모 요소 노드
console.log(myTag.parentElement); //div content
//자식 요소 노드
console.log(myTag.children[1]); //li British Shorthair
console.log(myTag.firstElementChild); //li Ragdoll
</script>
</body>
</html>
myTag.children[1].nextElementSibling (<li> Scottish Fold 출력)과 같이 프로퍼티를 이어서 사용할 수 있다.
자료 참고: 코드잇
'[JavaScript]' 카테고리의 다른 글
| [javascript] DOM의 활용 (0) | 2022.09.22 |
|---|---|
| [javascript] inner/outerHTML, textContent 비교 (0) | 2022.09.13 |
| [javascript] DOM이란? - 1 (문서 객체 모델) (0) | 2022.09.05 |
| [javascript] 객체 접근 - 객체 프로퍼티(property) 열거 & 조작 (0) | 2022.08.29 |
| [javascript] 겹치는 구간 찾기 & map의 활용 (0) | 2022.08.24 |
댓글