[JavaScript] DOM 탐색 - 부모, 자식, 형제 노드 찾기

 

DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍적으로 접근하고

조작할 수 있게 해주는 인터페이스입니다.

 

 

부모 노드 찾기

parentNode: 해당 요소의 부모 노드를 반환합니다.

let parent = element.parentNode;

 

 

closest(): 지정한 셀렉터와 일치하는 가장 가까운 조상 요소를 반환합니다.

let closestParent = element.closest('selector');

 

 

자식 노드 찾기

childNodes: 해당 요소의 모든 자식 노드를 NodeList로 반환합니다.

let children = element.childNodes;

 

 

children: 해당 요소의 자식 요소만을 HTMLCollection으로 반환합니다.

let childElements = element.children;

 

 

firstChild 및 lastChild: 첫 번째 및 마지막 자식 노드를 반환합니다.

let firstChild = element.firstChild;
let lastChild = element.lastChild;

 

 

형제 노드 찾기

previousSibling 및 nextSibling: 이전 및 다음 형제 노드를 반환합니다.

let previousSibling = element.previousSibling;
let nextSibling = element.nextSibling;

 

 

previousElementSibling 및 nextElementSibling: 이전 및 다음 형제 요소를 반환합니다.

let previousElementSibling = element.previousElementSibling;
let nextElementSibling = element.nextElementSibling;

 

 

예제

<div id="parent">
  <div id="child1">자식 1</div>
  <div id="child2">자식 2</div>
  <div id="child3">자식 3</div>
</div>

// 부모 노드 찾기
const parent = childElement1.parentNode;
console.log('child1의 부모 노드:', parent); // <div id="parent">...</div>

// 자식 노드 찾기
const children = parentElement.children;
console.log('parent의 자식 노드들:', children); // [div#child1, div#child2, div#child3]

const firstChild = parentElement.firstElementChild;
console.log('parent의 첫 번째 자식 노드:', firstChild); // <div id="child1">자식 1</div>

const lastChild = parentElement.lastElementChild;
console.log('parent의 마지막 자식 노드:', lastChild); // <div id="child3">자식 3</div>

// 형제 노드 찾기
const nextSiblingOfChild1 = childElement1.nextElementSibling;
console.log('child1의 다음 형제 노드:', nextSiblingOfChild1); // <div id="child2">자식 2</div>

const previousSiblingOfChild2 = childElement2.previousElementSibling;
console.log('child2의 이전 형제 노드:', previousSiblingOfChild2); // <div id="child1">자식 1</div>

const nextSiblingOfChild3 = childElement3.nextElementSibling;
console.log('child3의 다음 형제 노드:', nextSiblingOfChild3); // null (다음 형제 노드가 없음)

// closest 메서드 사용 (부모 요소 탐색)
const closestParent = childElement1.closest('div');
console.log('child1과 가장 가까운 div 요소:', closestParent); // <div id="child1">자식 1</div>