[자바스크립트] 주변 요소 선택기(셀렉터)

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);
// 모든 형제(요소,주석,줄바꿈 포함) 배열

Leave a Comment