안녕하세요. 이번 시간에는 jQuery DOM traversing에 대해서 배워보겠습니다. traversing을 횡단으로 직역하니 좀 어색하네요... 그냥 트래버싱이라고 하는 게 더 나아보입니다. 말 그대로 DOM을 자유자재로 이동하는 방법입니다. 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
부모 태그를 한 번 선택해볼까요? parent 메소드를 사용하면 됩니다.
$('div#zero').parent(); // [div.main]
document.getElementById('zero').parentElement;parents
부모부터 시작해서 조상 태그를 모두 선택합니다.
$('div#zero').parents(); // [div.main, div#container, body, html]parentsUntil
부모부터 시작해서 선택한 조상 태그 이전까지를 모두 선택합니다.
$('div#zero').parentsUntil('body'); // [div.main, div#container]closest
조상 태그를 선택할 수 있습니다. #container을 선택하고 싶다면
$('div#zero').closest('#container'); // [div#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')next
형제자매 태그 중 다음 태그를 선택할 수 있습니다.
$('div#zero').next(); // [div#nero]
document.getElementById('zero').nextElementSibling;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) 이렇게요. 다음 시간에는 선택한 태그의 속성을 바꾸는 방법에 대해서 알아보겠습니다!
익명
ZeroCho