jQuery - Traversing

“이동(move through)“을 의미하는 jQuery traversing은 다른 요소와의 관계를 기반으로 HTML 요소를 “찾거나”(또는 선택)하는 데 사용됩니다. 하나의 선택으로 시작하여 원하는 요소에 도달할 때까지 해당 선택을 통해 이동하십시오.

아래 이미지는 HTML 페이지를 트리(DOM tree)로 보여줍니다. jQuery traversing을 사용하면 선택한(현재) 요소에서 시작하여, 트리에서 쉽게 위(ancestors, 조상), 아래(descendants, 자손) 및 옆으로(siblings, 형제) 이동할 수 있습니다. 이 이동을 DOM 트리를 통한 traversing 또는 이동이라고 합니다.

• <div> 요소는 <ul>의 부모(parent)이며, <ul> 내부에 있는 모든 요소의 조상(ancestor)입니다.
• <ul> 요소는 두 <li> 요소의 부모(parent)요소이고, <div> 요소의 자식(child) 요소입니다.
• 왼쪽 <li> 요소는 <span>의 부모(parent), <ul>의 자식(child), 그리고 <div>의 자손(descendant) 요소입니다.
• <span> 요소는 왼쪽 <li>의 자식(child)요소이며, <ul> 및 <div>의 자손(descendant)요소입니다.
• 두 개의 <li> 요소는 형제(siblings) 요소(동일한 부모를 공유함)입니다.
• 오른쪽 <li> 요소는 <b>의 부모(parent)요소, <ul>의 자식(child) 요소 및 <div>의 자손(descendant) 요소입니다.
• <b> 요소는 오른쪽 <li>의 자식(child)요소이고, <ul> 및 <div>의 자손(descendant) 요소입니다.

조상(ancestor)은 부모(parent), 조부모(grandparent), 증조부모(great-grandparent)가 될 수 있습니다.
후손(descendant)은 자녀(child), 손자(grandchild), 증손자(great-grandchild)가 될 수 있습니다.
형제(Siblings)는 같은 부모(parent)를 가집니다.

jQuery는 DOM을 횡단(traverse)할 수 있는 다양한 메소드를 제공합니다.

횡단 메서드의 가장 큰 범주는 트리 횡단(tree-traversal)입니다.

다음 장에서는, DOM 트리에서 위, 아래, 옆으로 이동하는 방법을 살펴보겠습니다.

모든 jQuery Traversing 메서드에 대한 전체 개요를 보려면 jQuery Traversing Reference로 이동하십시오.