[jQuery] DOM을 탐험하는 방법

우리는 DOM을 사용하므로서 HTML의 element들을 하나의 커다란 tree로본다

 

맨위에 HTML tag가 있고 그 밑에는 head, body

body밑에는 수많은 tag들이 있다.

 

즉 document(HTML)을 커다란 object로 보는것이다.

 

그래서 document에서 selector를 사용해 안에있는 속성들을 가지고 올 수 있다.

 

$('.wrapper1');

우리는 document안에 있는 wrapper1을 선택했다. 만약 wrapper1의 next sibling을 선택하고 싶다면?

$('.wrapper1').next();

이렇게 다음 sibling wrapper2를 선택가능하다.

 

$('.wrapper1').prev();//prev sibling
$('.wrapper1').parent();//parent
$('.wrapper1').children();//children

이렇게 DOM을 탐험할 수 있다.

 

하지만 find()와 closest대해 알아보자

$('ul').find('li-1');

여기서 ul안에 있는 li-1을 select할 수있다.

$('ul li-1')을 사용할수 있겠지만 위에가 더빠르다고 한다

 

정말 중요한건 closest() 왜냐하면 event bubbling을 이용한 event delegation에서 아주 유용하게 활용가능하기 때문. 어떠한 element들이 눌렸을때 공통된 parent element를 바꾸고 싶다면 closest()를 사용하자.

 

$('.outer-item').closest('.parent');
$('.inner-item').closest('.parent');
//둘다 같은 parent를 가리킨다.

//closest는 명시된 selector에 해당되는 가장 가까운 parent를 select한다