jQuery DOM 탐색(traversing)

jquery-dom.war

1. 코드 실행 순서

 

children.html ; 자손 레벨을 탐색

find.html ; 자식 레벨 뿐만 아니라 자손 레벨도 탐색

prev.html ; 자신의 바로 앞의 태그

next.html ; 자신의 바로 옆의 태그

siblings.html ; 자신의 형제 노드(태그)들을 선택

parent.html ; 자신의 부모 노드를 선택

 

Filtering.html ; 선택된 집합에서 다시 조건에 맞는 jquery 집합을 선택함.

 

append.html

append-apply.html ; 클릭하면 그림이 추가됨

prepend.html

prepend-apply.html ; 클릭하면 사진이 순환됨

html().html

text().html

remove.html

empty.html

 

eq() : 인덱스 번호에 해당하는 노드를 탐색. 첫번째 노드는 '0'

filter() : 선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출.

first() : 첫번째 자식 노드

has() : 선택된 요소들이 자신의 자식의 요소에서 주어진 선택자가 "(가지고) 있는지"를 확인하여 범위를 축소

is() : 매개 변수로는 selector, element, jQuery를 입력하여 입력한 객체가 "있으면" true값을 반환

last() : 마지막 자식 노드

map() : 대상이 되는 노드의 집합을 변경

not() : 조건에 맞지 않는 것들만 찾아서 선택

slice() : 선택된 집합을 조건의 범위로 재선택함. 배열의 slice()와 동일한 기능.

 

주의사항)

Selector의 :first, Traversing의 first()의 차이점?

 

선택된 집합에서 첫번째 노드를 반환하는 데에는 차이가 없음.

후자가 최신 버전이기 때문에 필터링하는 속도가 빠르고 여러가지 메소드를 연속해서 나열할 수 있는

메소드 체인 방식의 표기에 더 적합함.

 

ex)

 

$("div").click(fn);

$("div:first).css("background-color", "red"); // Selectors의 :first

 

$("div").click(fn).first().css("background-color", "red"); // Traversing의 first()

 

 

DOM Insertion, Inside

append() : 선택 노드 내부의 맨 뒤에 자식 모드를 새로 추가

appendTo(Target) : 새로운 노드를 타겟(Target)에 해당되는 노드 내부의 마지막에 추가

prepend() : 선택된 노드의 내부의 맨 앞에서 자식 노드를 새로 추가

prependTo(Targert) : 새로운 노드를 타겟에 해당하는 노드 내부의 첫번째로 추가

html() / html(htmlString) : 노드 내부의 HTML을 읽고 쓰기 가능

text() / text(textString) : 노드의 글자를 일고 쓰기 가능

 

 

DOM Insertion, OutSide

after() : 선택된 노드 뒤에 새로운 노드 추가(형제 관계)

before() : 선택된 노드 앞에 새로운 노드 추가(형제 관계)

insertAfter(target) : 작성된 jQuery 객체를 타겟 뒤에 삽입(형제 관계)

insertBefore(target) : 작성된 jQuery 객체를 타겟 앞에 삽입(형제 관계)

 

 

DOM Insertion, Around

wrap() : 선택된 집합을 각각의 매개 변수로 넘긴 HTML 구조로 감쌈.

wrapAll() : 선택된 집합의 전체 외곽을 매개 변수로 넘긴 HTML 구조로 감쌈.

wrapInner() : 선택된 집합의 내부에 매개 변수로 넘긴 HTML 구조를 감쌈.

 

 

DOM Remove

detach() : DOM에서 조건에 일치되는 노드를 제거함. 단, 메모리에 남아 있기 때문에 다시 재활용 가능.

remove() : DOM에서 조건과 일치하는 모드들을 제거.

empty() : DOM에서 조건과 일치하는 노드들의 자식 노드들을 제거.

unwrap() : wrap()의 반대 참수로써, 선택된 집합을 감싸고 있는 HTML을 제거.

 

 

DOM Replacement

replaceAll() : 조건에 맞는 노드들을 타겟 노드들로 대체함.

replaceWith() : 조건에 맞는 노드들을 매개 변수로 넘긴 새로운 HTML로 대체함.

 

clone() : 선택한 노드와 같은 노드를 복사

 

 

# detach() : remove()와 동일한 기능을 하지만 detach()에 의해서 제거된 노드들을 임시로 보관할 수 있다.

DOM에서 제거했다가 다음에 다시 삽입할 수 있기 때문에 제거와 삽입을 반복할 때 유용하다.