상위(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)을 반환함. |
'웹 퍼블리싱 > JS & 웹개발 지식' 카테고리의 다른 글
모바일기기인지 체크 (0) | 2020.06.29 |
---|---|
n번째 요소의 좌표 구하기 (0) | 2020.03.02 |
Window.matchMedia() (0) | 2020.03.02 |
(CMD) 원하는 위치에 프로젝트 생성하기 & 명령어 (0) | 2020.01.22 |
(호스팅 종류) 웹호스팅/서버호스팅/클라우드 (0) | 2020.01.19 |