jQuery PSEUDO Classes, Dom Traversing

문서에 같은 태그가 여러가지 있는 경우 class나 id를 사용해 제어할 수도 있지만 jQuery에서는 빈번하게 사용되는 패턴의 탐색들에 대해 미리 정의해놓았다. 그중 : 필터를 통해 여러 방법으로 태그에 접근하는 PSEUDO Classes와 그것을 보완하기 위해 나온 DOM Traversing에 대해 포스팅.

1) 특정 구간의 처음과 끝 태그에 접근하는 방법.
'destinations'를 id로 가지고 있는 태그의 li 태그 중 첫번째와 마지막 태그에 ':first', ':last' 키워드를 통해 접근할 수 있다.

2) 마찬가지로 ':odd'와 ':even' 키워드로 홀수, 짝수 태그에 접근할 수 있으며, 이때 처음 시작하는 태그의 index가 0이기 때문에 짝수부터 시작한다는 점에 유의하자.


다음과 같이 하위 요소들을 한칸 띄우는 방식으로 검색이 가능하지만 속도가 굉장히 느려 사용자들의 불편함을 초래했고, 이를 개선시킨 것이 DOM Traversing이다.

$("#destinations li"); 와 같은 PSEUDO Classes를 통해서도 접근할 수 있지만 아래의 .find("li"); 와 같이 Traversing을 호출하는 것이 속도가 월등히 빠르다.

마찬가지로 처음 태그에 접근하고 싶은 경우에도 ':first' 보다 '.first()' 를 사용하는 것이 성능 향상에 도움이 된다.

last도 마찬가지.

중간의 태그에 접근하고 싶은 경우에는 next()와 prev() Traversing을 사용하지만 빈도는 낮다고 한다.

 parent() 함수를 통해 1단계 상위 부모 태그에 접근할 수 있다.

children() 함수를 통해 1단계 하위 태그에 접근할 수 있다. Cascading( > ) 을 사용한 것과 같은 결과를 갖게 된다는 말이다.