글 작성자: juyoungit

jQuery Traversing은 다른 element와의 관계에 따라서 html element를 찾거나 선택하는 데 사용 됩니다. 여기서 사용되는 "Traversing"이라는 용어가 우리말로 "탐색"이라는 점을 생각해보면 해당 개념이 어디에 사용되는 지 쉽게 기억할 수 있을 것입니다. 즉, jQuery Traversing을 사용하면 현재 선택된 html element를 기준으로 마음대로 상위, 하위 요소로 그 선택상태를 쉽게 이동할 수 있다는 장점이 있으며, 이는 jQuery를 이용한 web page 작성 시 굉장히 유의미한 강력한 기능으로서 사용될 수 있습니다.

 

Traversing에서 중요한 것은 각 html element들이 서로 어떤 관계를 가지는 지 정확하게 파악하는 것이 중요합니다. 아래와 같은 DOM Tree가 존재한다고 할 때 우리는 각 html element 들이 서로 가지는 관계를 아래와 같이 정리해볼 수 있습니다.

예시를 위한 DOM Tree

1. <div> element는 <ul> element의 parent 이며, 모든 element 들의 ancestor 이다.
2. <ul>  element는 <li> element의 parent 이며, <div> element의 child 이다.
3. 왼쪽에 있는 <li> element는 <span> element의 parent 이며, <ul> element의 child이고, <div>의 ancestor 이다.
4. <span> element는 왼쪽 <li>의 element 이며, <ul>, <div> element의 descendant 이다.
5. 두 <li> element는 서로 siblings 이다. (서로 같은 parent를 공유하고 있음)
6. 오른쪽 <li> element는 <b> element의 parent 이며, <ul> element의 child이고, <div> element의 descendant 이다.
7. <b> element는 오른쪽 <li> element의 child 이며, <ul>, <div> element의 descendant 이다.

jQuery는 이와 같이 DOM Tree를 쉽게 Traverse 할 수 있는 다양한 method를 지원합니다.

 

 

Ancestors

DOM Tree 상에서 자신의 현재 위치를 기준으로 상위에 존재하는 element를 탐색하기 위해서는 다음과 같은 종류의 method들을 사용할 수 있습니다.

1. parent()
2. parents()
3. parentsUntil()

parent()

현재 선택된 element의 직접적인 parent를 반환합니다. 해당 method는 오직 바로 한단계 상위에 있는 element 만을 탐색한다는 점을 기억하는 것이 중요합니다. 그 보다 더 상위 level의 element들은 탐색하지 않습니다. 아래의 예시코드를 실행하면 어떤 결과가 나올지 예측해보시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
      <span>span</span>
    </p> 
  </div>
</div>

</body>
</html>

해당 예시코드의 실행결과는 다음과 같습니다. 실행결과에서 확인할 수 있듯이 <span> element의 바로 한단계 상위에 위치하는 li, p element가 반환되어 CSS 속성을 통해 color와 border 속성이 변경된 것을 확인할 수 있습니다.

위의 예시코드에 대한 실행결과

parents()

parents method는 현재 선택된 html element의 모든 상위 ancestor들을 반환합니다. 즉, 현재 자신의 level로부터 root까지에 이르는 모든 ancestor들을 반환한다고 이해하시면 됩니다. 앞에서 살펴본 예시코드와 동일한 예시를 사용해서 그 동작결과를 살펴보도록 하겠습니다.

<script>
$(document).ready(function(){
  $("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>

위의 예시코드에 대한 실행결과

위의 결과를 통해서 확인할 수 있듯이 span element로부터 root에 이르기 까지 존재하는 상위의 모든 ancestor element들이 반환된 것을 확인할 수 있습니다. 그리고 아래와 같이 parents() method에 아래와 같이 paremeter를 전달하면 반환되는 ancestor 중에서 해당 element만을 선택적으로 반환시키는 것이 가능합니다.

<script>
$(document).ready(function(){
  $("span").parents("ul").css({"color": "red", "border": "2px solid red"});
});
</script>

위의 예시코드에 대한 실행결과

parentsUntil()

해당 method는 현재 선택된 html element로부터 parameter로 주어진 element에 이르기까지 존재하는 모든 ancestor element들을 반환합니다. parents() method와 달리 root가 아닌 도달하고자 하는 element를 parameter를 전달함으로서 이를 지정할 수 있다는 특징을 가지고 있습니다.

 

그래서 아래와 같은 코드를 작성 시 span element로부터 div element에 이르기까지 그 사이에 존재하는 element가 반환되는 것을 확인할 수 있습니다.

<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
</script>

위의 예시코드를 실행한 결과

 

 

Descendants

DOM Tree 상에서 현재 선택된 element 기준으로 하위에 존재하는 html element들을 탐색하기 위해서 jQuery에서는 아래와 같은 종류의 method들을 지원합니다.

1. children()
2. find()

children()

해당 method는 현재 선택된 html element가 가지는 모든 직접적인 하위 element들을 반환합니다. 즉, 자신을 기준으로 한단계 아래 level의 element들만 선별적으로 반환한다는 것 입니다. 아래와 같이 코드를 작성한 경우 div element를 기준으로 자신보다 한 단계 아래에 있는 element를 반환하게 됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
.descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").children().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>   
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

아래와 같이 실행결과를 확인해보면 그 관계를 어렵지 않게 파악할 수 있습니다. 여기서는 children() method가 자신을 기준으로 descendant를 반환하는 것이 아니라 바로 한단계 아래에 있는 element들인 child를 반환하는 것임을 기억하는 것이 중요합니다.

위의 예시코드에 대한 실행결과

또한 children method에 적절한 parameter를 전달함으로서 반환되는 children에 더 많은 제약조건을 설정할 수 도 있습니다. 아래와 같이 코드를 작성할 경우 div element가 가지는 child 중에서 "first"라는 class에 속하는 element만 반환합게 됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
.descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").children("p.first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p class="first">p (child)
    <span>span (grandchild)</span>   
  </p>
  <p class="second">p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

위의 예시코드에 대한 실행결과

find()

현재 선택된 element에 대해서 가장 끝 하위요소까지 이르는 모든 descendant들을 반환합니다. 즉, DOM Tree 상에서 현재 선택된 element로부터 leaf node에 이르는 path 상에 존재하는 모든 node들을 반환한다고 이해하시면 됩니다. 그리고 아래의 코드를 통해서 확인할 수 있듯이 parameter를 전달함으로서 descendant들을 선별적으로 선택할 수 있습니다. 아래의 코드는 div element의 descendant 중에서 span element를 선택하여 반환하는 코드에 해당합니다.

<!DOCTYPE html>
<html>
<head>
<style>
.descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>   
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

위의 예시코드에 대한 실행결과

그리고 만약 해당 element에 대한 모든 descendant들을 출력하고 싶다면 아래와 같이 작성하면 됩니다.

$(document).ready(function(){
  $("div").find("*");
});

 

Siblings

DOM Tree 상에서 Siblings는 서로 같은 parent를 공유하는 element가 서로 가지는 관계에 해당합니다. 그래서 이 Sibling과 관련된 method를 적절히 잘 사용하면 DOM Tree 상에서 현재 선택된 element 기준으로 상위, 하위 방향뿐만 아니라 좌우(sideways)로도 이동하는 것이 가능합니다. Siblings Traversing과 관련된 method들은 다음과 같습니다.

1. siblings()
2. next()
3. nextAll()
4. nextUntil()
5. prev()
6. prevAll()
7. prevUntil()

siblings()

siblings method는 현재 선택된 element를 기준으로 해당 element와 sibling의 관계를 가지는 모든 element들을 반환 합니다. 아래와 같은 코드를 작성하고 실행해보면 div element 안에 존재하는 h2 element와 sibling의 관계를 가지는 모든 element들이 반환된 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

위의 코드에 대한 실행결과

그리고 다음과 같이 siblings method에 parameter를 전달함으로서 반환되는 sibling을 filtering 할 수 있습니다. 아래의 코드의 경우 h2 element와 sibling의 관계를 가지는 element 중에서도 p element만을 반환하고 있는 것을 확인할  수 있습니다. 실행결과를 확인해보면 그 동작을 더 쉽게 이해할 수 있을 것 입니다.

<script>
$(document).ready(function(){
  $("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>

위의 코드에 대한 실행결과

next()

현재 선택된 element를 기준으로 바로 자신의 다음에 위치하는 sibling element를 반환합니다. 여기서 말하는 다음의 기준은 html body 상에서 자신 바로 아래에 위치하는 element라고 이해하시면 됩니다. 아래의 코드는 h2 element가 가지는 sibling 중에서 h2 element의 바로 다음에 위치하는 h3 element가 반환되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

위의 예시코드에 대한 실행결과

nextAll()

현재 선택된 element와 sibling의 관계를 가지는 element 중에서 현재 선택된 element 기준으로 다음에 위치하는 모든 element들을 반환합니다. 워딩을 통해서 명확하게 설명하는 것이 어려운 관계로 예시코드와 그 실행결과를 통해서 설명하도록 하겠습니다. 아래의 코드를 제외한 나머지 부분은 이전에 살펴본 예시에서 사용된 코드와 동일 합니다.

<script>
$(document).ready(function(){
  $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>

위의 에시코드에 대한 실행결과

nextUntil()

현재 선택된 element부터 paremeter로 전달된 element 사이에 위치하는 모든 sibling element들을 반환합니다. 이도 마찬가지로 예시코드와 실행결과를 통해서 그 설명을 대신하도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>
</html>

여기서 중요하게 기억하고 넘어가야할 점은 parameter로 전달된 element는 그 반환대상에 포함되지 않는다는 점 입니다.

위의 예시코드의 실행결과

prev() / prevAll() / prevUntil()

현재 선택된 element 기준으로 이전 위치에 해당하는 sibling element들을 반환할 목적으로 사용합니다. 나머지 내용들은 next 계열의 method가 동작하는 그 성격과 동일하기 때문에 이에 대한 구체적인 설명은 생략하도록 하겠습니다.

 

 

Filtering

jQuery는 DOM Tree에 대한 Traversing을 수행함에 있어서 filtering을 위한 method들을 제공 합니다. filtering을 위해서 제공되는 method의 종류는 다음과 같습니다.

1. first()
2. last()
3. eq()
4. filter()
5. not()

first()

명시한 element 종류에 대해서 html 문서 내에서 가장 첫번째로 등장하는 element를 반환합니다. 그래서 아래와 같은 코드를 작성했다고 할 때, html 문서 내에서 첫번째로 등장하는 div element가 선택되어 반환된 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").first().css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>This is a paragraph.</p>

<div style="border: 1px solid black;">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>

위의 코드에 대한 실행결과

last()

반대로 last method는 명시한 element에 대해서 html 문서 내에서 가장 마지막에 위치하는 element를 반환합니다.

<script>
$(document).ready(function(){
  $("div").last().css("background-color", "yellow");
});
</script>

즉, 위에서 예시로 제시된 전체 코드를 아래와 같이 변경한다고 했을 때 아래와 같은 실행결과를 얻을 수 있습니다.

위의 코드에 대한 실행결과

eq()

명시한 특정 type의 element에 대해서 parameter로 전달한 특정 인덱스를 기반으로 element를 반환해줍니다. 아래의 코드는 html 문서 내에 존재하는 <p> element 중에서 1번 index를 가지는 element에 대해서 CSS 속성을 변경하는 동작을 수행합니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald (index 0).</p>
<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p>
<p>My best friend is Mickey (index 3).</p>

</body>
</html>

위의 코드를 실행 시 아래와 같이 1번 인덱스를 가지는 p element의 CSS 속성이 변경된 것을  확인할 수 있습니다. index를 기반으로 접근하게되면 이전에 사용했던 방식들보다 훨신 Flexable 한 Access가 가능하다는 점에서 많은 장점을 가집니다. 하지만 indexing이 무조건 높은 가독성을 보장하는 것이 아니기 때문에 각 element가 배치되는 관계 속에서 그 index 구조를 정확하게 파악하는 것이 중요합니다. 그렇지 못할 경우 잘못된 결과를 얻을 수 있습니다.

위의 코드에 대한 실행결과

filter()

parameter로 특정한 기준을 전달함으로써 그 기준을 충족하는 element에 대해서만 반환이 이뤄집니다. 이 때 전달하는 기준은 CSS에서 사용하는 Selector가 많이 사용됩니다. parameter로 사용자가 원하는 구체적인 기준은 전달함으로서 더 flexable한 filtering을 수행할 수 있다는 강력한 장점이 존재합니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>

위의 예시코드에 대한 실행결과

not()

filter() method와 반대의 개념이라고 생각하시면 됩니다. parameter로 전달한 기준을 충족하지 못하는 모든 element들을 반환합니다. 위에서 사용한 예시에서 아래와 같이 코드를 변경할 경우, parameter로 설정한 기준을 충족하지 않는 element들이 반환되는 것을 확인할 수 있습니다. 단, 여기서 선택한 element의 type에 대한 내용은 not에 적용되지 않고 고유하게 유지됩니다.

<script>
$(document).ready(function(){
  $("p").not(".intro").css("background-color", "yellow");
});
</script>

위의 예시코드에 대한 실행결과

 

'Web Basic > jQuery' 카테고리의 다른 글

jQuery - AJAX  (0) 2021.07.16
jQuery - HTML  (0) 2021.07.16
jQuery - Effect  (0) 2021.07.15
jQuery - 개요  (0) 2021.07.15

티스토리툴바