[jQuery] 요소의 탐색

조상 요소의 탐색

DOM 트리에서 특정 요소의 부모 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같습니다.

• parent(): 선택한 요소의 부모 요소를 선택합니다.

  $("p").parent()

• parents(): 선택한 요소의 조상 요소를 모두 선택합니다.

  $("p").parents("div")

• parentsUntil(): 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.

  $("p").parentsUntil("div")

• closest(): 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다. (조상 요소뿐만 아니라 해당 요소 자신까지도 검사)

  $("p").closest("div")

  
  

형제 요소의 탐색

• siblings(): 선택한 요소의 형제요소 중에서 지정한 선택자에 해당하는 모든 요소를 선택합니다.

  $("h4").siblings()

• next(): 선택한 요소의 바로 다음에 위치한 형제 요소를 선택합니다.

  $("h4").next()

• nextAll(): 선택한 요소의 다음에 위치한 현제 요소를 모두 선택합니다.

  $("h4").nextAll()

• nextUntil(): 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.

  $("h4").nextUntil("p")

• prev(), prevAll(), prevUntil() 모두 next(), nextAll(), nextUntil() 메소드와 정반대로 동작하여 요소들을 선택해 줍니다.
  
  

자손 요소의 탐색

• children(): 선택한 요소의 자식 요소를 모두 선택합니다.

  $("ul").children()

• find(): 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택합니다.

  $("li").find("*")

  
  

기타 탐색

• add(): 선택한 요소의 집합에 전달받은 요소를 추가합니다.

  $("li").add("p")

• each(): 선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행합니다.

  $("li").each(function() {
    $(this).toggleClass("boldFont");
  })

• end(): 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원해 줍니다.

  $(function() {
    $("button").on("click", function() {
      $("#divBox")     // id가 "divBox"인 요소의
        .find("p")   // 자손 요소 중에서 <p>요소를 모두 선택하고,
        .end()       // 선택된 요소의 집합을 find() 메소드의 실행 전으로 복원함.
        .css("border", "2px solid green"); // 따라서 id가 "divBox"인 요소의 CSS 스타일을 설정함.
      });
  });

• offsetParent(): 선택한 요소를 위치시킬 때 기준으로 사용된 조상 요소를 선택할 수 있습니다.

  $("#para").offsetParent()

• contents(): 선택한 요소의 자식요소를 텍스트 노드와 주석 노드까지 모두 포함하여 선택해 줍니다.

  $(function() {
    $("button").on("click", function() {
      $("iframe")     // <iframe>요소의
        .contents() // 자식 요소를 모두 선택한 후,
        .find("a")  // 그 중에서 <a>요소를 모두 선택하고,
        .css("backgroundColor", "aqua"); // 선택된 모든 <a>요소의 CSS 스타일을 설정함.
    });
  });

  
  

필터링 메소드

• first(): 선택한 요소 중에서 첫 번째 요소를 선택합니다.

  $("li").first()

• last(): 선택한 요소 중에서 마지막 요소를 선택합니다.

  $("li").last()

• eq(): 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택합니다. (첫 요소를 0으로 놓음)

  $("li").eq(1)

• filter(): 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참인 요소를 모두 선택합니다.

  $("li").filter(":odd")

• not(): 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택합니다.

  $("li").not(":lt(2)")