======jQuery Traversing - Descendants======
<WRAP left notice 70%>
  * description : jQuery - Traversing Descendants
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-19
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article====
[[https://www.w3schools.com/jquery/jquery_traversing_descendants.asp|jQuery Traversing - Descendants]]\\
\\
%%jQuery%%를 사용하면 %%DOM%% 트리 아래로 횡단하여 요소의 자손 요소들을 찾을 수 있습니다.\\
\\
자손은 자식(child), 손자(grandchild), 증손자(great-grandchild) 등이 될 수 있습니다.\\

=====Traversing Down the DOM Tree=====

%%DOM%% 트리를 아래로 횡단하는 데 유용한 두 가지 %%jQuery%% 메서드는 다음과 같습니다.\\
  * ''child()''
  * ''find()''

=====jQuery children() Method=====

''children()'' 메서드는 선택한 요소의 모든 직계 자식 요소들을 반환합니다.\\
\\
이 메서드는 DOM 트리 아래로 단일 수준만 횡단합니다.\\
\\
다음 예제는 각 %%<div>%% 요소의 직계 자식인 모든 요소를 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("div").children().css({ "color": "blue", "border": "2px solid red" });
    })
</code>
\\
매개 변수를 선택하여 자식요소 검색을 필터링 할 수도 있습니다.\\
\\
다음 예제는 ''%%<div>%%''의 직계 자식인 "first" 클래스명을 가진 모든 ''%%<p>%%'' 요소를 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("div").children("p.first").css({ "color": "blue", "border": "2px solid red" });
    });
</code>

=====jQuery find() Method=====
''find()'' 메서드는 선택한 요소의 마지막 하위 요소까지 아래에 있는 자손 요소들을 반환합니다.\\
\\
다음 예제에서는 ''%%<div>%%''의 자손 요소인 모든 ''%%<span>%%'' 요소들을 반환합니다.\\

====예제====
<code jquery>
  <script>
    $(document).ready(function () {
      $("div").find("span").css({ "color": "red", "border": "2px solid red" });
    });
</code>
\\
다음의 예제는 ''%%<div>%%''의 모든 자손 요소들을 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("div").find("*").css({ "color": "red", "border": "2px solid red" });
    });
</code>

=====jQuery Traversing Reference=====
모든 %%jQuery%% Traversing 메서드에 대한 전체 개요를 보려면 [[https://www.w3schools.com/jquery/jquery_ref_traversing.asp|jQuery Traversing Reference]]로 이동하십시오.

{{tag>오션 jQuery Traversing - Descendants}}