[JS] 자바스크립트 부모, 형제, 자식 노드 찾기

 

 

 

 

(참고) 2021.08.13 - [개발/JavaScript] - [JS] Tag, Class, id로 원하는 요소 찾기

 

자바스크립트에서 DOM 작업을 할 때 부모, 형제, 자식 노드를 찾는 방법이다.

 

 

1. childNodes

childNodes는 자식 노드를 찾을때 사용한다.  ( 제이쿼리: https://api.jquery.com/children/ )

모든 자식을 찾을때에는 childNodes를 사용하며 배열 형태로 저장된다.

var criteria = document.getElementById('criteria');
var all = criteria.childNodes; // 모든 자식노드
var firstNode = criteria.firstChild; // 첫번째 자식노드
var lasaNode = criteria.lastChild; // 마지막 자식노드

var target = criteria.childNodes[i] // 특정 순서의 자식노드

 

 

 

2. parentNode

parentNode는 부모 노드를 찾을 때 사용한다. ( 제이쿼리: https://api.jquery.com/parent/ )

var criteria = document.getElementById('criteria');
var parent = criteria.parentNode; // 해당 노드의 부모노드
var ancestor = criteria.parentNode.parentNode; // 해당 노드의 조상노드

 

 

3. Sibling

형제 노드를 찾을때는 Sibling을 사용한다. 자바스크립트에서는 해당 노드의 앞,뒤 형제밖에 찾을 수 없다

특정 형제노드를 찾으려면 제이쿼리를 써야한다. ( 제이쿼리: https://api.jquery.com/siblings/ )

var criteria = document.getElementById('criteria');
var previous = criteria.previousSibling; // 해당 노드의 앞 형제노드
var next = criteria.nextSibling; // 해당 노드의 뒤 형제노드

 

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://developer.mozilla.org/ko/docs/Web/API/Node