제이쿼리 기타 탐색
제이쿼리에서는 기본 탐색(parent·child 등) 외에도 다양한 특수 상황에서 유용한 기타 탐색 메소드를 제공합니다.
이 메소드들은 요소 집합 확장·콜백 반복·메소드 체이닝 관리·위치 기준 탐색 등, 보다 세부적인 DOM 조작에 유용합니다.
🔹 주요 기타 탐색 메소드 요약
| 메소드 | 설명 | 주 활용처 |
|---|---|---|
.add() |
기존 선택 요소에 다른 요소 추가 | 요소 집합 확장 |
.each() |
선택된 요소마다 반복 콜백 실행 | 개별 처리 및 반복 작업 |
.end() |
이전 메소드 호출 전의 선택 상태로 복귀 | 메소드 체이닝 관리 |
.offsetParent() |
요소의 위치 계산 시 기준이 되는 부모 요소 선택 | 위치·레이아웃 기준 탐색 |
.contents() |
자식 요소 전체(텍스트·주석 노드 포함) 선택 | iframe 내 콘텐츠 접근 등 |
🔸 메소드별 상세 예제 및 활용법
1️⃣ .add() – 요소 집합 확장
선택된 요소에 새로운 요소를 추가합니다.
// <li> 요소 집합에 <p> 추가 후 스타일 적용
$("li").add("p").css("border", "2px solid green");
- DOM 조작 시 여러 종류의 요소를 한 번에 선택할 때 유용
- 선택자뿐 아니라 jQuery 객체·DOM 객체도 전달 가능
2️⃣ .each() – 요소별 반복 작업 수행
각 요소마다 전달받은 콜백 함수를 실행합니다.
// 모든 li 요소에 bold 클래스 토글
$("li").each(function() {
$(this).toggleClass("bold");
});
- 반복 작업 시 for 루프보다 간결하고 가독성 좋음
- 콜백의 인수
(index, element)를 활용해 조건부 작업 가능
3️⃣ .end() – 체이닝 중 이전 선택 상태로 복원
이전 메소드 실행 전의 선택 상태로 돌아갑니다.
// div에서 자손 p 선택 후 다시 div로 복귀해 스타일 적용
$("#divBox")
.find("p").addClass("highlight")
.end()
.css("border", "2px solid blue");
- 메소드 체이닝을 직관적이고 가독성 있게 유지
- DOM 탐색 비용을 줄이고 성능 최적화에 기여
4️⃣ .offsetParent() – 위치 계산의 기준 찾기
요소가 배치될 때 기준이 되는 부모 요소(기준 부모)를 선택합니다.
javascript
복사편집
// #para의 위치 기준 부모에 테두리 추가
$("#para").offsetParent().css("border", "2px solid red");
- position 속성이
relative,absolute,fixed인 가장 가까운 부모 요소 반환 - 없으면 기본적으로
<html>요소가 반환됨
5️⃣ .contents() – 텍스트·주석 노드까지 자식 요소 선택
선택한 요소의 모든 자식 노드를 선택합니다.
// iframe 내부의 모든 <a> 링크에 배경색 적용
$("iframe").contents().find("a").css("background", "yellow");
- iframe 내 콘텐츠 접근 시 필수
- 일반 탐색 메소드가 접근 못하는 텍스트·주석 노드까지 포함
🔖 메소드 활용 비교표
| 메소드 | 탐색 범위 | 성능 | 특이 사항 |
|---|---|---|---|
.add() |
기존 집합 + 추가 요소 | 양호 | 다른 타입 요소 합침 가능 |
.each() |
선택 집합 각 요소 개별 접근 | 보통 | 루프보다 코드 간결성 ↑ |
.end() |
이전 선택 상태 복원 | 매우 좋음 | 체이닝 코드 가독성 강화 |
.offsetParent() |
위치 기준 부모 요소 선택 | 매우 좋음 | 레이아웃 디버깅에 유용 |
.contents() |
모든 자식 노드(텍스트 포함) | 보통 | iframe·주석 처리 가능 |
🛠️ 실전 활용 팁
- 효율적인 DOM 조작:
.add()를 통해 탐색 범위를 확장해 한 번에 처리 - 반복 작업 간소화: 반복적 UI 생성·업데이트는
.each()메소드로 처리 - 체이닝 관리: 복잡한 체인은
.end()로 중간 단계에서 깔끔하게 끊어서 유지보수 편의성 높이기 - 레이아웃 기준 요소 찾기: 디버깅 시
.offsetParent()를 통해 요소가 위치하는 기준 요소를 명확히 파악 - iframe 관리:
.contents()를 활용하여 iframe 내 문서 요소까지 쉽게 조작 가능
📌 질문 정리
| 질문 | 답변 |
|---|---|
.add()와 .append() 차이는? |
.add()는 요소 집합에 추가하는 것이고, .append()는 실제 DOM에 삽입하는 것입니다. |
.each()와 자바스크립트 for문의 차이는? |
.each()는 jQuery 객체로 편리하게 요소를 탐색하고 체이닝이 가능해 코드가 간결합니다. |
.end() 없이 체이닝하면 문제? |
.end() 없이 과도한 체이닝은 코드 가독성을 떨어뜨릴 수 있습니다. |
.offsetParent()에서 기준이 되는 요소가 없으면? |
position 요소가 없으면 항상 <html> 요소가 반환됩니다. |
.contents()로 텍스트 노드 선택 시 스타일 적용 가능? |
텍스트 노드에는 스타일 적용이 불가능하며, 래퍼로 감싸서 적용해야 합니다. |
댓글남기기