DOM트리
HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 한다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현함.
요소노드(Element Node) : 태그를 표현하는 노드
텍스트노드(TextNode) : 문자를 표현하는 노드로 일반적으로 요소노드의 자식요소가 되며 자식요소를 가질 수 없음.
요소노드에 대한 이동 프로퍼티
| 프로퍼티 | 유형 | 결과 |
| element.children | 자식 요소 노드 | element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
모든노드에 대한 이동 프로퍼티
요소노드가 아닌 다른 노드를 이동하고 싶을 때 사용
| 프로퍼티 | 유형 | 결과 |
| node.childNodes | 자식 노드 | node의 자식 노드 모음(NodeList) |
| node.firstChild | 자식 노드 | node의 첫 번째 자식 노드 하나 |
| node.lastChild | 자식 노드 | node의 마지막 자식 노드 하나 |
| node.parentNode | 부모 노드 | node의 부모 요소 하나 |
| node.previousSibling | 형제 노드 | node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나 |
| node.nextSibling | 형제 노드 | node의 다음(next) 혹은 우측(right)에 있는 노드 하나 |
<!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>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 id="title-2">Cat-2</h1>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
<li>Norwegian Forset</li>
<li>Turkish Angora</li>
<li>Bombay</li>
<li>Selkirk Rex</li>
<li>Munchkin</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>const myTag = document.querySelector('#content');
console.log(myTag);
// 형제 요소 노드
console.log(myTag.previousElementSibling); // 이전 형제는 없으므로 null
console.log(myTag.nextElementSibling); // script 태그 출력
// 부모 요소 노드
console.log(myTag.parentElement); // #content의 부모태그인 body 태그
// 자식 요소 노드
console.log(myTag.children[1]);
console.log(myTag.firstElementChild); // 자식의 첫번째 요소
console.log(myTag.lastElementChild); // 자식의 마지막 요소
'JavaScript > Interactive JavaScript' 카테고리의 다른 글
| [JavaScript] HTML 속성 (0) | 2023.01.20 |
|---|---|
| [JavaScript] 요소 노드 추가 / 이동 / 삭제 (0) | 2023.01.18 |
| [JavaScript] 이벤트 핸들링, 이벤트 핸들러 (0) | 2023.01.18 |
| [JavaScript] 태그 선택하기 (0) | 2023.01.17 |
| [JavaScript] 다양한 이벤트 (0) | 2023.01.16 |