JQUERY - Traversing (탐색) 요약정리

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

트리구조 탐색(Tree Traversal)

DOM Tree의 Tree 구조를 기반으로 찾아가는 방식.

Method	설명
childern()	선택한 노드의 모든 자식 요소를 선택
find()	선택한 노드의 자손 요소 중 조건에 맞는 요소를 선택
next()	선택한 노드의 다음 노드를 선택
nextAll()	선택한 노드의 다음 모든 노드를 선택
parent()	선택한 노드의 부모 노드를 선택
parents()	선택한 노드의 모든 부모 노드를 선택
prev()	선택한 노드의 이전 노드를 선택
prevAll()	선택한 노드의 모든 이전 노드를 선택
closest()	선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택
nextUntil()	다음에 위치한 노드를 조건에 맞을 때까지 찾음
parentsUntil()	조건이 참이 될 때까지 부모 노드를 찾음
prevUntil()	이전에 위치한 노드를 조건에 맞을 때까지 찾음
siblings()	형제 노드들을 모두 찾습니다.

 

* DOM에서 노드(Node)란 개별적인 단위: 
요소노드(element node), 텍스트 노드(text node), 속성 노드(attribute node)

 

예제

$('div#container').childern('p') : 

div#container' 태그 자식 태그들 중에서 <p> 태그를 모두 선택. 주의할 점은 자손 레벨에서 찾지 않고 자식 레벨에서만 찾음

$('div#container').find('p') :

<div> 태그의 자손 태그들 중에 <p> 태그를 모두 찾아 선택. children()과 find()의 차이점은
자식까지 찾느냐, 자손까지 찾느냐입니다.

$('p#part1').prev() : 

id 값이 part1인 <p> 태그의 바로 앞에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달할 수 있음

$('p#part1').next() : 

id 값이 part1인 <p> 태그의 바로 다음에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달할 수도 있음

 

---

 

필터링

선택된 집합네서 다시 조건에 맞는 jQuery 집합을 선택

Method	설명
eq()	인덱스 번호에 해당하는 노드를 찾습니다. index 0은 첫 번째 노드를 의미합니다.
filter()	선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출해낼 수  있음
first()	선택된 노드 집합네서 첫 번째 자식 노드를 찾습니다.
has()	선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소함
is()	매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환함
last()	선택된 노드 집합에서 마지막 자식 노드를 찾음
map()	대상이 되는 노드 집합을 변경
not()	조건에 맞지 않는 것들만 찾아서 선택
slice()	선택된 집합을 조건의 범위로 재선택해줌. 배열의 slice()와 같은 기능

예제

$('div#main p').fist() :

id가 main인 <div> 태그의 첫 번째 <p> 태그를 선택

 

$('div#main p').last() :

id가 main인 <div> 태그의 마지막 <p> 태그를 선택

 

$('div#main p').eq(1) :

id가 main인 <div> 태그의 두 번째 <p> 태그를 선택. 인덱스는 0부터 시작

 

$('div').filter('.middle') :

<div> 태그 중에서 클래스 속성 값이 middle인 것을 선택

1

<div class="middle""></div>

cs

 

$('div').not('.middle') :

<div> 태그 중에서 클래스 속성 값이 middle이 아닌 것을 선택

 

$('li').has('ul') :

<li> 태그 자손 중에 <ul>태그가 있는 <li> 태그를 선택

 

---

https://www.w3schools.com/ 번역

W3Schools Online Web Tutorials

MethodDescription

add()	일치하는 요소 세트에 요소를 추가합니다.
addBack()	이전 세트의 요소를 현재 세트에 추가합니다.
andSelf()	버전 1.8에서는 더 이상 사용되지 않습니다. addBack ()의 ​​별칭
children()	선택된 요소의 직접적인 모든 아이를 돌려줍니다.
closest()	선택된 요소의 첫 번째 조상을 반환합니다.
contents()	선택된 요소의 모든 직접 자식을 반환합니다 (텍스트 및 주석 노드 포함).
each()	일치하는 각 요소에 대해 함수를 실행합니다.
end()	현재 체인에서 가장 최근의 필터링 작업을 끝내고 일치하는 요소 집합을 이전 상태로 되돌립니다.
eq()	선택된 요소의 특정 색인 번호를 갖는 요소를 리턴합니다.
filter()	일치하는 요소 집합을 선택기와 일치하는 집합으로 줄이거 나 함수의 테스트를 전달합니다.
find()	선택한 요소의 자손 요소를 반환합니다.
first()	선택된 요소의 최초의 요소를 돌려줍니다.
has()	내부에 하나 이상의 요소가있는 모든 요소를 ​​반환합니다.
is()	일치하는 요소 집합을 selector / element / jQuery 객체와 비교하여 검사하고, 적어도 하나 이상의 요소가 지정된 인수와 일치하면 true를 반환합니다.
last()	선택된 요소의 마지막 요소를 반환합니다.
map()	일치하는 세트의 각 요소를 함수를 통해 전달하여 반환 값을 포함하는 새 jQuery 객체를 생성합니다.
next()	선택된 요소의 다음 형제 요소를 반환합니다.
nextAll()	선택된 요소의 다음 형제 요소를 모두 반환합니다.
nextUntil()	주어진 두 인수 사이에있는 모든 다음 형제 요소를 반환합니다.
not()	특정 기준과 일치하지 않는 요소를 반환합니다.
offsetParent()	최초로 위치하는 친 요소를 돌려줍니다.
parent()	선택된 요소의 직접적인 부모 요소를 반환합니다.
parents()	선택한 요소의 모든 조상 요소를 반환합니다.
parentsUntil()	주어진 두 인수 사이의 모든 조상 요소를 반환합니다.
prev()	선택한 요소의 이전 형제 요소를 반환합니다.
prevAll()	선택한 요소의 이전 형제 요소를 모두 반환합니다.
prevUntil()	주어진 두 인수 사이의 이전 형제 요소를 모두 반환합니다.
siblings()	선택한 요소의 모든 형제 요소를 반환합니다.
slice()	일치하는 요소 집합을 인덱스 범위로 지정된 하위 집합으로 줄입니다.

 

 

출처
https://www.w3schools.com/