웹 퍼블리싱/JS & 웹개발 지식

(jQuery) 요소의 탐색

꼬지비 2020. 1. 19. 15:42

상위(ancestor:조상) 요소의 탐색

DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다.

 

 .parent()  선택한 요소의 부모(parent) 요소를 선택한다.
 .parents()  선택한 요소의 상위(ancestor) 요소를 모두 선택한다.
 .parentsUntil()  선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
 .closest()  선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택한다.

 

하위(descendant:자손) 요소의 탐색

DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같다.

 

 .children()  선택한 요소의 자식(child) 요소를 모두 선택한다.
 .find()  선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다.

 

형제(sibling) 요소의 선택

DOM 트리에서 특정 요소의 형제(sibling) 요소 즉, 같은 선상에 있는 요소를 선택하기 위한 메소드는 다음과 같다.

 

 .siblings()  선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
 .next()  선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
 .prev()  선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.

 

기타 탐색 메소드

DOM 트리에서 요소의 탐색을 위해 사용되는 기타 메소드는 다음과 같다.

 

 .add()  선택한 요소에 다른 요소를 추가 선택한다.
 .each()  선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행한다.

 

필터링(filtering) 메소드

DOM 트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다.

 

 .first()  선택한 요소 중에서 첫 번째 요소를 선택함.
 .last()  선택한 요소 중에서 마지막 요소를 선택함.
 .eq()  선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함.
 .not()  선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함.
 .has()  선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함.
 .is()  선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환함.

 

(출처:http://www.devkuma.com/books/3)