jQuery : DOM 탐색 메소드와 필터

jQuery는 DOM핸들링에 뛰어난 JavaScript 라이브러리입니다. jQuery에서 DOM객체를 탐색하는 방법은 여러 가지 있습니다. 이번 글은 DOM구조를 이용하여 DOM객체를 찾는 방법을 다룹니다. DOM객체에 관한 자세한 설명과 기본적인 Selector에 대한 설명은 넥스트리블로그 김유리님의 jQuery와 DOM 첫걸음을 참조하세요.

DOM을 탐색하는 Filter

jQuery는 DOM객체를 탐색, 접근 하는 여러 가지 방법을 제공합니다. 그 중 하나가 바로 필터 선택자(Filter Selector)입니다. 이번 글에서는 필터 선택자 중 DOM구조를 이용하여 DOM객체를 탐색, 접근 하는 필터를 다루겠습니다. 아래는 해당하는 필터의 간략한 설명입니다.

:parent - 자식요소를 가진 DOM객체 탐색
:empty - 자식요소가 없는 DOM객체 탐색
:first-child - 첫 번째 자식요소인 DOM객체 탐색
:last-child - 마지막 자식요소인 DOM객체 탐색
:nth-child - n번째 자식요소인 DOM객체 탐색
:only-child - 자신이 유일한 자식요소인 DOM객체 탐색

아래 예제와 그림1은 이번 글에서 쓰일 기본적인 예제와 그 결과입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
	<style type="text/css">
		div{ background-color: navy;}
		span{ background-color: blue; display: block; width: 50px; height: 50px;}
		li{ background-color: skyblue;}
		
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script type="text/javascript"></script>
</head>
<body>
<div>
div1
	<div>
	div1-1
		<span>span1</span>
		<ul>
			<li>li1-1</li>
			<li>li1-2</li>
			<li>li1-3</li>
		</ul>
	</div>
</div>
<div>
div2
	<span>span2</span>
	<span></span>
	<ul>
		<li>li2-1</li>
		<li>li2-2</li>
		<li>li2-3</li>
	</ul>
</div>
</body>
</html>

지금부터 위 Filter들을 하나씩 살펴 봅니다.

jQuery(':parent')

parent라는 단어를 보면 이 필터가 마치 부모요소를 탐색하는 필터로 오해할 수 있습니다. 하지만, 이 parent 필터는 부모인 요소를 탐색하는 필터입니다. 즉 자식요소를 가진 DOM객체를 탐색합니다.

<script type="text/javascript">
$(document).ready(function(){
	$("span:parent").fadeTo(1500, 0.5);
});
</script>

위 예제는 parent 필터의 간단한 예제입니다. 위 메인 html에서 span태그 중 자식요소를 가지는 DOM객체를 탐색하여 fadeTo 애니매이션 효과를 주었습니다. parent 필터는 자식요소로 다른 html태그 뿐만 아니라 text 또한 자식요소로 판단하기 때문에 span1과 span2가 fadeTo 애니매이션을 적용합니다.

jQuery(':empty')

empty필터는 parent필터와 정반대입니다. empty필터는 자식요소를 가지지않은 DOM객체를 탐색합니다. 단어 그대로 해당 객체 안이 텅 빈 상태인 것을 찾습니다.

<script type="text/javascript">
$(document).ready(function(){
	$("span:empty").fadeTo(1500, 0.5);
});
</script>

위 예제는 empty 필터의 간단한 예제입니다. 앞 서 말하였 듯 parent필터와는 반대로 span태그 중 자식요소가 없는 DOM객체를 탐색하여 fadeTo 애니매이션을 적용합니다. 주의해야할 점은 parent 필터와 마찬가지로 text또한 자식요소로 판단한다는 점과 띄어쓰기(" ")와 줄바꿈(엔터)역시 text로 인식하여 원치 않는 결과가 나올 수도 있습니다.

jQuery(':first-child') , jQuery(':last-child')

first-child 필터와 last-child 필터는 자식요소중 첫 번째, 마지막요소 만을 탐색합니다.

<script type="text/javascript">
$(document).ready(function(){
	$("li:first-child").fadeTo(1500, 0.1);
	$("li:last-child").fadeTo(1500, 0.5);
});
</script>

위 예제는 first-child 필터와 last-child 필터의 간단한 예제입니다. li중 첫번째 자식인 요소와 마지막 자식인 요소를 탐색하여 fadeTo 애니매이션을 실행합니다. 여기서 주의할 것은 li의 자식요소가 아닌 li중 첫번째 자식인 요소와 마지막 자식인 요소라는 사실입니다. 혼동해서 ul:first-child라고 쓰시는 경우를 주의해야 겠지요. ul의 첫번째 자식요소인 li를 찾기위해선 ul:first-child가 아닌 위 예제 처럼 사용합니다.

jQuery(':nth-child(n)')

nth-child 필터는 위 필터와 비슷한 필터입니다. 단, 괄호 안에 몇번 째 자식인 요소를 찾을 것인지 넣어주어 그 n번째 자식인 요소를 탐색합니다.

<script type="text/javascript">
$(document).ready(function(){
	$("li:nth-child(2n-1)").fadeTo(1500, 0.5);
});
</script>

위 예제는 nth-child 필터의 간단한 예제입니다. 바로 위 필터 firts-child, last-child와 마찬가지로 자신이 n번째 자식요소인 DOM객체를 탐색하여 fadeTo 애니매이션을 실행합니다. 꼭 숫자가 아니어도 된다는 사실을 알아 두시면 도움이 됩니다. 위 예제 처럼 수식을 넣어도 적용됩니다. 예를 들면, 2n-1(홀수) 2n(짝수)처럼 말입니다.

jQuery(':only-child')

only-child필터는 자기 자신이 유일한 자식요소인 DOM객체를 탐색합니다. 즉, 형제 노드가 없는 DOM객체를 탐색하여 반환합니다.

<script type="text/javascript">
$(document).ready(function(){
	$(":only-child").fadeTo(1500, 0.5);
});
</script>

위 예제는 only-child필터의 간단한 예제입니다. 위 예제중 모든 요소는 형제노드를 갖지만 div1-1은 형제노드가 없으므로 즉, only-child이므로 탐색이 되어 fadeTo 애니매이션이 적용되었습니다.

DOM을 탐색하는 메소드

위 필터를 제외하고도 jQuery는 DOM을 탐색하는 메소드를 제공합니다. 그 메소드들은 다음과 같습니다.

parent() : 해당 요소의 부모요소 탐색
parents() : 해당 요소의 조상요소 탐색
children() : 해당 요소의 자식요소 탐색
prev() : 해당 요소의 형제노드중 바로 이전 요소 탐색
prevAll() : 해당 요소의 형제노드중 이전 요소 모두 탐색
next() : 해당 요소의 형제노드중 바로 이후 요소 탐색
nextAll() : 해당 요소의 형제노드중 이후 요소 모두 탐색
siblings() : 해당 요소를 제외한 형제노드 모두 탐색

지금부터 위 메소드들을 하나씩 살펴 봅니다.

jQuery('selector').parent()

parent메소드는 해당 selector의 부모 요소를 탐색하는 메소드입니다. 위 parent 필터와는 다릅니다.

<script type="text/javascript">
$(document).ready(function(){
	$("li").parent().fadeTo(1500, 0.1);
});
</script>

위 예제는 parent메소드의 간단한 예제입니다. li의 부모요소 즉, ul 을 탐색하여 fadeTo 애니매이션을 실행합니다. 바로 부모요소만 탐색하기 때문에 그 외 요소들은 애니매이션이 적용되지 않습니다. 하지만, 아래 나오는 parents메소드는 조금 다릅니다.

jQuery('selector').parents()

parents메소드는 위 parent 메소드보다 넓은 범위를 탐색합니다. 부모 요소 뿐만 아니라 부모의 부모요소. 즉, 조상 요소를 모두 탐색하는 메소드입니다.

<script type="text/javascript">
$(document).ready(function(){
	$("li").parents().fadeTo(1500, 0.8);
});
</script>

위 예제는 parents 메소드의 간단한 예제입니다. 앞 서 말하였 듯 parent메소드 보다 넓은 범위를 탐색하여 결국은 div1까지 fadeTo 애니매이션을 적용시킵니다. 위 예제를 자세히 보면 li와 인접한 상위요소 일수록 중첩하여 fadeTo메소드를 적용한 것을 볼 수 있습니다.

jQuery('selector').children()

children메소드는 parent메소드와 반대되는 메소드입니다. 즉, 부모요소가 아닌 자식요소를 탐색하는 메소드입니다.

<script type="text/javascript">
$(document).ready(function(){
	$("ul").children().fadeTo(1500, 0.3);
});
</script>

위 예제는 children메소드의 간단한 예제입니다. ul의 자식요소인 li들을 탐색하여 fadeTo 애니매이션을 실행합니다. 자손 요소들이 아닌 바로 자식 요소만 탐색합니다.

jQuery('selector').prev() , jQuery('selector').prevAll()

prev메소드와 prevAll메소드는 형제노드를 찾는 메소드중 이전 형제노드를 탐색하는 메소드입니다. All의 유무는 단어의 의미와 같이 바로 이전요소만 탐색할 것인지 이전요소를 전부 탐색할 것 인지를 나타냅니다.

<script type="text/javascript">
$(document).ready(function(){
	$("#li1_3").prev().fadeTo(1500, 0.3);
	$("#li2_3").prevAll().fadeTo(1500, 0.3);
});
</script>

위 예제는 prev메소드와 prevAll 메소드의 간단한 예제입니다. 위 메인에서 li1_3과 li2_3에 각각 해당하는 아이디를 주고 prev와 prevAll메소드로 탐색하여 fadeTo애니매이션을 적용시킵니다. 앞서말하였 듯 두 메소드의 차이점은 바로 이전 형제노드만 탐색하느냐 이전 형제노드를 모두 탐색하느냐 차이입니다.

jQuery('selector').next() , jQuery('selector').nextAll()

next메소드와 nextAll메소드는 위 prev 메소드,prevAll 메소드와 반대되는 메소드입니다. next메소드는 바로 이후 형제노드를 탐색하고 , nextAll메소드는 이후 형제노드들 모두를 탐색하는 메소드입니다.

<script type="text/javascript">
$(document).ready(function(){
	$("#li1_1").next().fadeTo(1500, 0.3);
	$("#li2_1").nextAll().fadeTo(1500, 0.3);
});
</script>

위 예제는 next메소드와 nextAll메소드의 간단한 예제입니다. 앞서 말하였듯 prev,prevAll메소드와 정반대의 메소드로 각각 바로 이후 형제노드, 이후의 모든 형제노드를 탐색한 후 fadeTo애니매이션을 실행합니다.

jQuery('selector').siblings()

siblings메소드는 prevAll메소드와 nextAll메소드를 합쳐놓은 메소드라고 생각하시면 편하겠네요. 이전 이후. 즉, 자신의 모든 형제노드를 탐색하는 메소드입니다.

<script type="text/javascript">
$(document).ready(function(){
	$("#li1_1").siblings().fadeTo(1500, 0.3);
	$("#li2_3").siblings().fadeTo(1500, 0.3);
});
</script>

위 예제는 siblings메소드의 간단한 예제입니다. 위 결과를 보시면 각각 li_1, li2_3에 해당하는 아이디를 지정하고 형제노드들을 탐색한 후 fadeTo애니매이션을 실행합니다.

맺음말

jQuery를 사용하면, 아무래도 순수 JavaScript에 비해 수행 속도가 느립니다. 하지만, DOM객체를 핸들링 하는 방법이 다양하고 직관적이어서 사용이 간단합니다. 특히, id Selector와 class Selector가 Filter, 탐색 메소드를 사용하는 것보다 훨씬 편하지만, 위와같은 방법들은 해당 Selector를 사용하지 못할 때 잘 활용할 수 있습니다. 감사합니다.

참고 도서 및 사이트

jQuery API, http://api.jquery.com/
김유리 / 넥스트리 홈블로그, jQuery와 DOM 첫걸음
윤인성 저 / “모던 웹을 위한 JavaScript jQuery 입문”, 한빛미디어, 2011
한성영 / Kosta강의자료