부모노드 찾기

Element.closest()

기준 Element에서 부터 closest()메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때 까지 탐색(문서 루트까지 이동), 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환, 조건에 만족한 요소가 없으면 null 반환

let cardHeader = target.closest('.card-header');

자식노드 찾기

Element.querySelector()

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환

let cardBody = cardHeader.querySelector('.card-body');

형제노드 찾기

Element.previousSibling;

Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴

//이전 노드 
let prev = cardBody.previousSibling;

Element.nextSibling;

읽기 전용 속성인 Node.nextSibling 은 부모의 childNodes 목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 null 값을 반환

//다음 노드
let next = cardBody.nextSibling;