이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌3 - jQuery - 2년 전 등록

제이쿼리 DOM 횡단(traversing)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 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) 이렇게요. 다음 시간에는 선택한 태그의 속성을 바꾸는 방법에 대해서 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.