개요
jQuery siblings 계열 메서드와 브라우저 DOM API에서 형제 노드를 탐색하는 방법 정리 jQuery는 요소 노드 기준으로 동작, DOM API의 일부 속성은 텍스트 노드를 포함하므로 차이 주의
핵심 개념
- .siblings([selector]) 선택한 요소의 형제 요소 중 선택자에 일치하는 모든 요소 선택
- .next() 바로 다음 형제 요소 선택
- .nextAll([selector]) 다음에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링
- .nextUntil(selector) 지정한 선택자에 해당하는 요소 바로 이전까지의 모든 다음 형제 요소 선택, 종료 요소는 미포함
- .prev() 바로 이전 형제 요소 선택
- .prevAll([selector]) 이전에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링
- .prevUntil(selector) 지정한 선택자에 해당하는 요소 바로 다음까지의 모든 이전 형제 요소 선택, 종료 요소는 미포함
DOM 탐색 속성
- parentNode 부모 노드 반환
- childNodes 자식 노드 목록을 NodeList 형태로 반환
- firstChild 첫 번째 자식 노드 반환
- lastChild 마지막 자식 노드 반환
- previousSibling 같은 레벨의 이전 노드 반환
- nextSibling 같은 레벨의 다음 노드 반환
참고로 previousElementSibling, nextElementSibling은 요소 노드만 대상으로 하며 실무에서 더 안전하게 사용되는 경우가 많음
동작과 차이
- 형제 탐색은 동일 부모를 공유하는 노드 집합 기준으로 수행됨
- jQuery 메서드는 요소 노드 중심으로 동작, 텍스트 노드와 주석 노드 무시
- DOM의 previousSibling, nextSibling은 공백으로 생긴 텍스트 노드까지 포함될 수 있음
- nextUntil, prevUntil은 종료 선택자 직전까지를 수집, 종료 선택자 자체는 포함하지 않음
사용 예시
jQuery 예시
$('.item.active').nextAll('.item')요소 .item.active 다음에 위치한 형제 중 .item만 수집
DOM API 예시
const prevNode = my_li.previousSibling
const nextNode = my_li.nextSibling텍스트 노드가 섞여 있을 수 있음. 요소만 원하면 previousElementSibling, nextElementSibling 사용 권장
주의와 팁
- 공백과 개행으로 생성되는 텍스트 노드 때문에 nextSibling이 기대와 다를 수 있음
- 자식 탐색 시 childNodes는 라이브 NodeList 반환, 변경에 따라 즉시 반영됨
- jQuery는 체이닝과 선택자 필터링으로 가독성 향상 가능, 과도한 DOM 재탐색은 캐시로 완화 권장
- 레이아웃 구조 변경 시 탐색 결과가 달라질 수 있으므로 특정 구조에 강하게 결합된 선택자 사용 최소화