자바스크립트 조상, 부모, 자식, 형제 관계로 요소 찾기

DOM 계층 관계를 통한 요소 찾기

자바스크립트에서 DOM(Document Object Model, 문서 객체 모델) 요소를 조상, 부모, 자식, 형제 등 구조적 계층 관계를 통해 찾는 방법에 대해 알아보겠습니다.

조상 요소 찾기

조상 요소 찾기
`closest()`	`CSS 선택자`와 일치하는 현재 요소를 포함하여 가장 가까운 조상 요소를 찾기

부모 요소 찾기

부모 요소 찾기
`parentElement`	현재 요소의 부모 요소 찾기

자식 요소 찾기

자식 요소 찾기
`children`	현재 요소의 자식 요소 목록 찾기
`firstElementChild`	첫 번째 자식 요소 찾기
`lastElementChild`	마지막 자식 요소 찾기

형제 요소 찾기

형제 요소 찾기
`previousElementSibling`	바로 이전 형제 요소 찾기
`nextElementSibling`	바로 다음 형제 요소 찾기

브라우저 호환성

DOM 계층 관계를 통한 요소 찾기에 대한 브라우저 호환성
메서드와 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`closest()`	41	15	35	6
`parentElement`	1	12	1	1.1
`children`	1	12	3.5	4
`firstElementChild`	2	12	3.5	4
`lastElementChild`	2	12	3.5	4
`previousElementSibling`	2	12	3.5	4
`nextElementSibling`	2	12	3.5	4

같이 보기

명세서

DOM 계층 관계를 통한 요소 찾기에 대한 명세서 사양
명세서 사양
`closest()`	DOM Standard #ref-for-dom-element-closest①
`parentElement`	DOM Standard #ref-for-dom-node-parentelement①
`children`	DOM Standard #ref-for-dom-parentnode-children①
`firstElementChild`	DOM Standard #ref-for-dom-parentnode-firstelementchild①
`lastElementChild`	DOM Standard #ref-for-dom-parentnode-lastelementchild①
`previousElementSibling`	DOM Standard #ref-for-dom-nondocumenttypechildnode-previouselementsibling②
`nextElementSibling`	DOM Standard #ref-for-dom-nondocumenttypechildnode-nextelementsibling②