JQuery 복습 - Traversing

https://www.w3schools.com/jquery/jquery_traversing_descendants.asp

JQuery Traversing
선택자를 기준점으로 시작하여 원하는 요소에 도달 할 때까지 이동 할 수 있게 해준다.

JQuery Traversing을 사용하면 선택한(현재)요소에서 시작하여 트리에서 쉽게 위(상위노드들), 아래(하위 노드들), 옆으로(형제노드들) 이동 할 수 있다.

 

이와같은 그림이 있을때

* <div>는 ul의 부모요소이다. 그리고 <div> 하위에 있는 모든 요소들의 ancestor(조상) 요소이다.

* <ul>요소는 양옆 li태그의 parent요소이다. 그리고 <div>요소의 child이다.

*왼쪽 <li>태그는 <span>태그들의 parant태그이다. 그리고 <ul>의 자식노드이며 또한 <div>의 descendant노드이다.

*양쪽 <li>태그를 형제노드(sibiling)라 한다.

JQuery ancestor
상위노드를 탐색하다

조상은 부모, 조부모, 증조부모등을 의미한다고 한다.

 

parents 메서드 

 

기준노드의 상위에있는 모든 노드를 반환한다.

$("span").parents().css({"color": "red", "border": "2px solid red"});

 

 

 

 

 

 

 

parents 메서드, 그리고 필터링

 

필터링을 위해 parents메서드에 인자로 "ul"을 입력한다. 상위노드에있는 모든 ul노드를 반환한다.

$("span").parents("ul").css("color": "red", "border": "2px solid red"});

 

 

 

 

 

parentsUntil() 메서드

선택자를기준으로 인자로 지정한 노드 사이의 모든 조상노드들을 반환한다.

$("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"})

//span과 div사이의 모든 노드를 반환한다-

 

 

JQuery Descendants
자손노드를 탐색하다.

자손은 자녀, 손자, 증손자 등을 의미한다.

 

Children 메서드

Children메서드는 선택된 요소의 모든 직계자식노드(single level down)를 반환한다.

$("div").children().css({"color": "red", "border": "2px solid red"});

//children메서드는 자손요소는 제외하고 "직계자식"노드만 반환한다.

 

 

 

Children 메서드와 필터링

파라미터로 선택자를 입력하여 직계자식노드 전체가 아닌, 특정 직계자식노드만을 선택 할 수 있다.

$("div").children("p[name='test'").css({"color": "red", "border": "2px solid red"});

// 모든 직계자식노드를 반환했었던 이전 예제와는 달리 name이라는 Attribute의 값이 test인 직계 p노드만을 반환한다.

 

 

 

Find 메서드

Children 메서드와는 달리, Find 메서드는 선택자의 모든 자손노드들을 반환한다.

$("div").find("*").css({"color": "red", "border": "2px solid red"});