[JS] javascript 선택자

let element = document.elementById("mySpan");
 
element.parentNode; // 바로 위 부모(요소,주석,줄바꿈 포함)
element.parentElement; // 바로 위 부모 요소
element.closest(); // 조상 요소 중 제일 가까운 요소 (Id,Class,속성값 등을 이용)
 
element.childNodes; // 바로 아래 자식(요소,주석,줄바꿈 포함) 배열
element.children; // 바로 아래 자식 요소 배열
element.querySelectorAll(); // 자손 요소 전체 배열 (Id,Class,속성값 등을 이용)
 
element.nextSibling; // 다음 형제(요소,주석,줄바꿈 포함)
element.nextElemnetSibling; // 다음 형제 요소
 
element.previousSibling; // 이전 형제(요소,주석,줄바꿈 포함)
element.previousElementSibling; // 이전 형제 요소
 
const getSiblings = elm => elm && elm.parentNode && [...elm.parentNode.children].filter(node => node != elm);
// 모든 형제 요소 배열
 
element.parentNode; // 바로 위 부모(요소,주석,줄바꿈 포함)
element.parentElement; // 바로 위 부모 요소
element.closest(); // 조상 요소 중 제일 가까운 요소 (Id,Class,속성값 등을 이용)
 
element.childNodes; // 바로 아래 자식(요소,주석,줄바꿈 포함) 배열
element.children; // 바로 아래 자식 요소 배열
element.querySelectorAll(); // 자손 요소 전체 배열 (Id,Class,속성값 등을 이용)
 
element.nextSibling; // 다음 형제(요소,주석,줄바꿈 포함)
element.nextElemnetSibling; // 다음 형제 요소
 
element.previousSibling; // 이전 형제(요소,주석,줄바꿈 포함)
element.previousElementSibling; // 이전 형제 요소
 
const getSiblings = elm => elm && elm.parentNode && [...elm.parentNode.children].filter(node => node != elm);
getSiblings(element);
// 모든 형제(요소,주석,줄바꿈 포함) 배열

 

 

출처 : https://blog.mydepot.kr/20210304_194#gsc.tab=0