형제 노드 가져오는 방법
이번 포스팅은 형제 노드를 가져오는 방법을 소개합니다.
먼저 형제 노드가 무엇인지 알아봅시다.
아래와 같은 HTML 마크업이 존재한다고 가정합시다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="parent" class="parent-class">
<div id="child-1">child1</div>
<div id="child-2">child2</div>
<div id="child-3">child3</div>
<div id="child-4">child4</div>
<div id="child-5">child5</div>
</div>
<script src="src/index.js"></script>
</body>
</html>id가 child-3인 HTML 요소를 기준으로 형제 노드는 네 개입니다.
id가 child-3인 HTML 요소를 기준
- id가 parent인 HTML 요소는 부모 노드입니다.
- id가 child-1인 HTML 요소는 형제 노드입니다.
- id가 child-2인 HTML 요소는 형제 노드이면서 이전 노드입니다.
- id가 child-4인 HTML 요소는 형제 노드이면서 다음 노드입니다.
- id가 child-5인 HTML 요소는 형제 노드입니다.
이전 형제 노드 가져오는 방법
기준 노드를 접근한 다음 previousElementSibling 프로퍼티를 사용합니다. 만약 이전 노드가 없는 경우 null이 반환됩니다.
다음 예제는 id가 child-3인 HTML 요소의 이전 노드를 가져옵니다.
const currentNode = document.querySelector("#child-3");
console.log(currentNode.previousElementSibling);[실행 결과]
기준 노드 이전의 모든 형제 노드를 가져오려면 이전 노드의 이전 노드를 접근하는 과정을 반복합니다. 기준 노드 이전의 모든 형제 노드를 가져오는 방법은 아래와 같습니다.
var currentNode = document.querySelector("#child-3");
var prevNode = currentNode.previousElementSibling;
while(prevNode) {
console.log(prevNode);
prevNode = prevNode.previousElementSibling;
}[실행 결과]
다음 형제 노드 가져오는 방법
기준 노드를 접근한 다음 nextElementSibling 프로퍼티를 사용합니다. 만약 다음 노드가 없는 경우 null이 반환됩니다.
다음 예제는 id가 child-3인 HTML 요소의 다음 노드를 가져옵니다.
const currentNode = document.querySelector("#child-3");
console.log(currentNode.nextElementSibling);[실행 결과]
기준 노드 다음의 모든 형제 노드를 가져오려면 다음 노드의 다음 노드를 접근하는 과정을 반복합니다. 기준 노드 다음의 모든 형제 노드를 가져오는 방법은 아래와 같습니다.
var currentNode = document.querySelector("#child-3");
var nextNode = currentNode.nextElementSibling;
while(nextNode) {
console.log(nextNode);
nextNode = nextNode.nextElementSibling;
}[실행 결과]
모든 형제 노드 가져오는 방법
모든 형제 노드를 가져오는 방법은 다음과 같습니다.
1. 부모 노드를 가져옵니다.
2. 부모 노드의 첫 번째 자식 노드를 가져옵니다.
3. 배열에 첫 번째 자식 노드를 추가합니다.
4. 다음 형제 노드를 가져온 다음 배열에 추가하며 기존 노드인 경우 배열에 추가하는 과정을 생략합니다.
var currentNode = document.querySelector("#child-3");
function getSiblings(currentNode) {
let slblings = [];
// 부모 노드가 없는 경우 현재 노드를 반환
if (!currentNode.parentNode) {
return currentNode;
}
// 1. 부모 노드를 접근합니다.
let parentNode = currentNode.parentNode;
// 2. 부모 노드의 첫 번째 자식 노드를 가져옵니다.
let silblingNode = parentNode.firstChild;
while (silblingNode) {
// 기존 노드가 아닌 경우 배열에 추가합니다.
if (silblingNode.nodeType === 1 && silblingNode !== currentNode) {
slblings.push(silblingNode);
}
// 다음 노드를 접근합니다.
silblingNode = silblingNode.nextElementSibling;
}
// 형제 노드가 담긴 배열을 반환합니다.
return slblings;
}
console.log(getSiblings(currentNode));[실행 결과]
정리
- previousElementSibling 프로퍼티는 현재 노드의 이전 노드를 반환하며 이전 노드가 존재하지 않으면 null을 반환합니다.
- 현재 노드의 모든 이전 노드를 구하는 방법은 이전 노드의 이진 노드를 접근하는 과정을 반복하는 것입니다.
- nextElementSibling 프로퍼티는 현재 노드의 다음 노드를 반환하며 다음 노드가 존재하지 않으면 null을 반환합니다.
- 현재 노드의 모든 다음 노드를 구하는 방법은 다음 노드의 다음 노드를 접근하는 과정을 반복하는 것입니다.
'JavaScript > DOM' 카테고리의 다른 글
| [JavaScript]HTML 요소 추가하는 방법 (0) | 2022.11.21 |
|---|---|
| [JavaScript]HTML 요소 생성하는 방법 (0) | 2022.11.15 |
| [JavaScript]부모, 자식 노드 가져오는 방법 (0) | 2022.11.15 |
| [JavaScript]querySelectorAll 반복문 사용 방법 (0) | 2022.11.15 |
| [JavaScript]HTML 요소 가져오는 방법 (1) | 2022.11.13 |
댓글