제이쿼리 DOM 횡단

DOM의 구조

html
--head
----title
--body
----div#container
------header
------div.main
--------nav
--------div#zero
----------p
------------b
------------em
----------span
----------input
--------div#nero
--------div#hero
------footer

 

 

div#zero 선택

$('div#zero')

 

 

parent

 

$('div#zero').parent();

document.getElementById('zero').parentElement;

 

parentsUntil

부모부터 시작해서 선택한 조상 태그 이전까지를 모두 선택

$('div#zero').parentsUntil('body');

 

 

closest

조상 태그를 선택할 수 있습니다. #container을 선택하고 싶다면

$('div#zero').closest('#container');

 

 

children

자식 태그를 모두 선택

$('div#zero').children(); // [p, span, input]
document.getElementById('zero').children;

 

 

 

first

선택한 태그 중 첫 번째 태그를 선택합니다.

 

 

$('div#zero').children().first(); // [p]
document.getElementById('zero').firstChild;

 

 

last

선택한 태그 중 마지막 태그를 선택합니다.

$('div#zero').children().last(); // [input]
document.getElementById('zero').lastChild;

 

 

eq

선택한 태그 중 n번째 태그를 선택합니다. 순서가 0, 1, 2, 3, ...이기 때문에 첫 번째 것은 0, 두 번째 것은 1 순으로 갑니다.

$('div#zero').children().eq(1); // [span]
document.getElementById('zero').children[1];

 

 

find

후손 태그를 선택할 수 있습니다

$('div#zero').find('em'); // [em]
document.getElementById('zero').getElementsByTagName('em')

 

 

nextAll

형제자매 태그 중 다음 모든 태그를 선택합니다.

$('div#zero').nextAll(); // [div#nero, div#hero]

 

 

 

nextUntil

다음 태그부터 선택한 태그 이전까지를 모두 선택합니다.

$('div#zero').nextUntil('div#hero'); // [div#nero]

 

 

prev

형제자매 태그 중 이전 태그를 선택할 수 있습니다

 

$('div#zero').prev(); // [nav]
document.getElementById('zero').prevElementSibling;

 

 

prevAll

형제자매 태그 중 이전 모든 태그를 선택합니다.

$('div#nero').prevAll(); // [nav, div#zero]

 

 

prevUntil

선택한 태그 이후부터 이전 태그까지를 모두 선택합니다.

$('div#nero').prevUntil('nav'); // [div#zero]

 

 

siblings

prevAll과 nextAll을 합쳐놓은 메소드입니다. 모든 형제자매 태그를 선택합니다.

 

$('div#zero').siblings(); // [nav, div#nero, div#hero]

 

 

filter

선택한 태그들 중에서 원하는 태그를 걸러냅니다

$('div').filter('#zero'); // [div#zero]

 

 

이렇게 자유자재로 이동하는 방법을 배웠습니다.

의 메소드들은 연달아 사용할 수 있습니다. 메소드 체이닝 기법이라고 불린다.

 $('div#zero').prev().parent().next().children().eq(0)