JavaScript - DOM Navigation

안녕하세요, 미래의 JavaScript 마법사 여러분! ? DOM 탐색의 마법적인 세계를 함께 여행할 준비가 되었나요? 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 모험을 안내해드리게 되어 기쁩니다. 그럼 가상의 나침반을 손에 들고, 함께 탐험해봅시다!

DOM Nodes는 무엇인가요?

DOM(Document Object Model)을 여러분의 웹 페이지의 가족 나무라고 상상해보세요. 이 나무의 각 요소는 노드라고 불립니다. 실제 가족과 마찬가지로, 이 노드들은 서로 관계가 있습니다 - 부모, 자식, 형제. 멋지죠?

간단한 예를 보겠습니다:

<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</body>
</html>

이 "가족"에서 <html> 요소는 고조부이고, <head>와 <body>는 그의 자식이며, 그렇게 이어집니다. 이 요소들은 우리의 DOM 트리의 노드입니다.

HTML DOM Nodes 간의 관계

이제 노드가 무엇인지 이해했으므로, 그들이 어떻게 관련되어 있는지 탐구해보겠습니다. 우리의 DOM 가족 나무에서:

부모 노드는 자식을 가집니다.
자식 노드는 부모를 가집니다.
형제 노드는 같은 부모를 가집니다.

예를 들어, 우리의 이전 HTML에서:

<html>는 <head>와 <body>의 부모입니다.
<head>와 <body>는 형제입니다.
<h1>과 <p>는 <body>의 자식입니다.

JavaScript를 사용한 노드 간 이동

이제 탐험가 모자를 쓰자! ? JavaScript는 이러한 노드 간 이동을 위한 몇 가지 유용한 도구를 제공합니다. 함께 들어보겠습니다!

첫 번째 자식 요소에 접근하기

첫 번째 자식 요소에 접근하려면 firstElementChild 프로퍼티를 사용합니다. 다음과 같이 합니다:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // 출력: H1

이 예제에서 우리는 <body> 태그의 첫 번째 자식을 찾고 있으며, 그것은 <h1> 요소입니다.

마지막 자식 요소에 접근하기

동일하게, 마지막 자식 요소에 접근하려면 lastElementChild를 사용합니다:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // 출력: P

이 예제에서 우리는 <body>의 마지막 자식을 찾고 있으며, 그것은 <p> 요소입니다.

모든 자식 요소에 접근하기

모든 자식 요소를 보고 싶다면 children을 사용합니다:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// 출력:
// H1
// P

이 코드는 <body>의 모든 자식을 순회하며 그들의 태그 이름을 로그합니다.

부모 노드에 접근하기

노드의 부모를 찾으려면 parentNode을 사용합니다:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // 출력: BODY

이 예제에서 우리는 <h1> 요소의 부모를 찾고 있으며, 그것은 <body>입니다.

다음 형제 노드에 접근하기

다음 형제 노드를 찾으려면 nextElementSibling을 사용합니다:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // 출력: P

이 코드는 <h1> 다음에 오는 형제를 찾고 있으며, 그것은 <p> 요소입니다.

이전 형제 노드에 접근하기

이전 형제 노드를 찾으려면 previousElementSibling을 사용합니다:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // 출력: H1

이 예제에서 우리는 <p> 앞에 오는 형제를 찾고 있으며, 그것은 <h1>입니다.

DOM 루트 노드

모든 가족 나무에는 그 뿌리가 있습니다. DOM에서는 세 가지 주요 루트가 있습니다:

document.documentElement - 루트 요소 (보통 <html>입니다)
document.head - <head> 요소
document.body - <body> 요소

console.log(document.documentElement.tagName); // 출력: HTML
console.log(document.head.tagName); // 출력: HEAD
console.log(document.body.tagName); // 출력: BODY

DOM nodeName 프로퍼티

각 노드는 이름을 가지고 있으며, nodeName 프로퍼티를 사용하여 접근할 수 있습니다:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // 출력: H1

DOM nodeValue 프로퍼티

nodeValue 프로퍼티는 노드의 값을 제공합니다. 텍스트 노드의 경우, 이는 텍스트 내용입니다:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // 출력: Welcome!

DOM 노드 타입

모든 노드는 동일하지 않습니다! DOM에는 다양한 타입의 노드가 있습니다. 주요 타입은 다음과 같습니다:

노드 타입	설명	nodeType 값
Element Node	어떤 HTML 요소 (예: `<p>`, `<div>`, 등)	1
Attribute Node	HTML 요소의 속성	2
Text Node	HTML 요소 내의 텍스트	3
Comment Node	HTML 주석	8
Document Node	전체 문서	9

DOM nodeType 프로퍼티

nodeType 프로퍼티를 사용하여 우리가 다루고 있는 노드 타입을 확인할 수 있습니다:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('This is a comment');

console.log(element.nodeType); // 출력: 1 (Element Node)
console.log(textNode.nodeType); // 출력: 3 (Text Node)
console.log(commentNode.nodeType); // 출력: 8 (Comment Node)

그리고 여러분! 여러분은 이제 DOM을 프로처럼 탐색했습니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 실험해보지 마세요. 언제 그때까지 DOM 트리를 더 빠르게 탐색할 수 있게 될 것입니다! ?️

행복한 코딩을 하고, DOM이 여러분과 함께 하기를 바랍니다! ?

Credits: Image by storyset

이전 튜토리얼:

JavaScript - DOM 애니메이션

다음 튜토리얼:

JavaScript - DOM 컬렉션