자바스크립트에서는 DOM(Document Object Model)을 통해 HTML 문서의 요소(element)를 조작할 수 있습니다. 부모 노드, 형제 노드, 자식 노드를 찾는 방법은 다음과 같습니다.
1. 부모 노드 찾기
부모 노드는 parentNode 속성으로 찾을 수 있습니다. 예를 들어, 아래 HTML 코드가 있다고 가정해봅시다.
<div id="parent">
<p>부모 노드</p>
</div>
이 때, 부모 노드를 찾기 위해서는 다음과 같이 코드를 작성할 수 있습니다.
const parent = document.querySelector('#parent');
const parentNode = parent.parentNode;
console.log(parentNode); // <body> 요소
2. 형제 노드 찾기
형제 노드는 previousSibling과 nextSibling 속성으로 찾을 수 있습니다. 이 때, 빈 공백이나 줄바꿈도 하나의 형제 노드로 취급됩니다. 예를 들어, 아래 HTML 코드가 있다고 가정해봅시다.
<div id="parent">
<p>첫 번째 자식 노드</p>
<span>두 번째 자식 노드</span>
<p>세 번째 자식 노드</p>
</div>
이 때, 두 번째 자식 노드의 이전 형제 노드와 다음 형제 노드를 찾기 위해서는 다음과 같이 코드를 작성할 수 있습니다.
const secondChild = document.querySelector('#parent span');
const previousSibling = secondChild.previousSibling;
const nextSibling = secondChild.nextSibling;
console.log(previousSibling); // <p>첫 번째 자식 노드</p>
console.log(nextSibling); // <p>세 번째 자식 노드</p>
3. 자식 노드 찾기
자식 노드는 childNodes 속성으로 찾을 수 있습니다. 이 때, 빈 공백이나 줄바꿈도 하나의 자식 노드로 취급됩니다. 예를 들어, 아래 HTML 코드가 있다고 가정해봅시다.
<div id="parent">
<p>첫 번째 자식 노드</p>
<span>두 번째 자식 노드</span>
<p>세 번째 자식 노드</p>
</div>
이 때, 부모 노드의 모든 자식 노드를 찾기 위해서는 다음과 같이 코드를 작성할 수 있습니다.
const parent = document.querySelector('#parent');
const childNodes = parent.childNodes;
console.log(childNodes); // NodeList [text, <p>, text, <span>, text, <p>, text]
위 코드에서 NodeList는 유사배열(array-like) 객체로, childNodes를 통해 부모 노드의 자식 노드를 모두 가져왔습니다. 하지만 이 때, 빈 공백이나 줄바꿈도 하나의 자식 노드로 취급되기 때문에, 실제 자식 노드를 찾으려면 태그명을 확인해야 합니다. 예를 들어, 위 코드에서 태그명이 'p'인 자식 노드만 가져오기 위해서는 다음과 같이 코드를 작성할 수 있습니다.
const parent = document.querySelector('#parent');
const childNodes = parent.childNodes;
const filteredChildNodes = [];
for (let i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeName === 'P') {
filteredChildNodes.push(childNodes[i]);
}
}
console.log(filteredChildNodes); // [ <p>첫 번째 자식 노드</p>, <p>세 번째 자식 노드</p> ]
위 코드에서는 for 루프를 사용해서 childNodes의 각 요소의 nodeName(태그명)이 'p'인 경우, filteredChildNodes 배열에 추가하도록 했습니다. 이렇게 하면 부모 노드의 'p' 태그를 가진 모든 자식 노드를 가져올 수 있습니다.
그 외에도 자바스크립트에서는 querySelector, querySelectorAll, getElementsByClassName, getElementsByTagName 등의 메서드를 통해 요소를 선택하고 조작할 수 있습니다. 이 중에서 querySelector는 CSS 선택자를 사용해서 요소를 선택할 수 있으므로, 매우 유용한 메서드입니다. 예를 들어, 위 코드에서 태그명이 'p'인 자식 노드를 찾는 코드를 querySelectorAll을 사용해서 다음과 같이 작성할 수도 있습니다.
const parent = document.querySelector('#parent');
const filteredChildNodes = parent.querySelectorAll('p');
console.log(filteredChildNodes); // NodeList [ <p>첫 번째 자식 노드</p>, <p>세 번째 자식 노드</p> ]
위 코드에서는 부모 노드에서 태그명이 'p'인 요소를 모두 선택해서 filteredChildNodes에 저장하도록 했습니다. 이렇게 하면 더 간단하게 자식 노드를 찾을 수 있습니다.
'자바스크립트' 카테고리의 다른 글
| [자바스크립트] 디바운싱과 쓰로틀링 (0) | 2023.03.11 |
|---|---|
| [자바스크립트] DocumentFragment 성능 개선 방법 (0) | 2023.03.11 |
| [자바스크립트] 객체 합치기 (0) | 2023.03.10 |
| [자바스크립트] 유효성 검증 (회원가입) (0) | 2023.03.10 |
| [자바스크립트] async 와 await (0) | 2023.03.10 |
댓글