jQuery Traversing

Table of contents

1. Traversing
   1. What is Traversing?
2. Ancestors Traversing
   1. Ancestors
3. Descendants Traversing
   1. Descendants
4. Siblings Traversing
   1. Siblings
5. Filtering Traversing
   1. Basic Filtering Methods
   2. Other filtering methods
6. Advanced Traversing
   1. Advanced

Traversing

What is Traversing?

DOM 트리에서 특정 요소의 부모나 자식을 찾는것을 뜻함

조상에는 parent, grandparent, great-parent … 이 있고

자식에는 child, grandchild, great-grandchild … 이 있다.

Siblings는 같은 부모를 가지고 있음

Ancestors Traversing

Ancestors

• parent()

  선택한 요소의 직속부모 선택

  한단계 위인 부모만 선택함

    $("span").parent();
  

• parents()

  선택한 요소의 모든 부모를 선택

  필터 요소를 주지 않으면 제일 상위 부모인 html까지 올라감

    //html 까지 올라감
    $("span").parents();
  
    or
  
    //ul 까지 올라감
    $("span").parents("ul");
  

• parentsUntil()

  두 인수(선택한 요소와 필터 요소) 사이의 모든 상위 요소를 리턴

  선택한 요소와 필터 요소를 제외한 부모들만 선택

    $("span").parentsUntil("div");
  

• closest()

  선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택

  .parents() 메소드와 비슷하지만 상위요소 뿐만 아니라 자기도 포함해서 선택할 수 있다는 점이 다름

  자세히보기

    $(".me").closest("li").css({"border": "2px solid red"});
  

Descendants Traversing

Descendants

• children()

  직계 자식만 선택

  한단계 아래인 자식만 선택함

  필터 요소를 주면 필터 요소만 선택

    $("selector").children();
  
    or 
  
    $("selector").children("p.first");
  

• find()

  모든 자식, 자손들중 필터 요소로 선택한 요소를 선택

    $("div").find("span");
  
    or
  
    $("div").find("*");
  

  ---

Siblings Traversing

Siblings

• siblings()

  선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택

  필터 요소로 특정한 형제를 고를 수도 있음

    $("h2").siblings();
  
    or
  
    $("h2").siblings("p");
  

• next()

  선택한 요소의 바로 다음에 위치한 형제 요소를 선택

    $("h2").next();
  

• nextAll()

  선택한 요소의 다음에 위치한 형제 요소를 모두 선택

    $("h2").nextAll();
  

• nextUntil()

  선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택

    $("h2").nextUntil("h6");  //h6은 선택하지 않음
  

• prev()

  선택한 요소의 바로 이전에 위치한 형제 요소를 선택

  next()와 반대

• prevAll()

  선택한 요소의 이전에 위치한 형제 요소를 모두 선택

  nextAll()와 반대

• prevUntil()

  선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택

  nextUntil()와 반대

Filtering Traversing

Basic Filtering Methods

요소 그룹에서 위치에 따라 특정한 요소를 선택할 수 있게하는 기본적인 필터링 메소드

• first()

  선택한 요소의 첫번째 요소

    $("div").first();
  

• last()

  선택한 요소의 마지막 요소

    $("div").last();
  

• eq()

  specific index number of the selected elements

  인덱스는 0부터 시작함

    $("p").eq(0);
  

Other filtering methods

일치하는 요소를 선택하거나, 특정한 조건에서 선택되지 않게 하는 필터링 메소드

• filter()

  특정한 기준을 선택한후, 기준에 맞는 요소만 선택

    $("p").filter(".intro");
  

• not()

  특정한 기준에 부합하지 않는경우 선택

  filter()와 반대 메소드

    $("p").not(".intro");
  

Advanced Traversing

Advanced

• add()

  선택한 요소에 다른 요소를 추가로 선택 (새로운 요소를 추가하는건 아님)

  다른 요소는 부모, 자식, 형제 상관없이 선택할 수 있음

    $("p").add("div").css({"border": "2px solid green"});
  
    //이 코드와 동일하다 
    $("p, div").css({"border": "2px solid green"});
  

• addBack()

  선택한 요소의 집합에 바로 전에 선택했던 요소를 추가로 선택

  선택한 요소와 그 부모요소를 동시에 선택!

    $("div").find("p").css({"backgroundColor": "aqua"});
      
    //span과 p를 동시에 선택함
    $("div").find("p").find("span").addBack().css({"backgroundColor": "aqua"});
  

• each()

  선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행

    <ul>
        <li>첫번째 아이템</li>
        <li>두번째 아이템</li>
        <li>세번째 아이템</li>
    </ul>
  

    $("li").each(function(index) {
        if (index % 2 == 0) {
            $(this).addClass("even");
        }
    });
  
    //li 요소를 반복하면서 콜백 함수 실행
  

• end()

  마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원

  addBack은 마지막 선택자를 포함, end는 마지막 선택자를 제외

    $("p#after").find("span").end().css({"border": "2px solid green"});
  
    //span요소를 취소하고 p#after의 css를 바꿈
  

• offsetParent()

  DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택

  여기서 말한 위치(positioned)는 CSS의 속성인 relative, absolute, fixed를 의미

  만약 위치가 설정된 요소가 존재하지 않으면 html 요소가 기준이 됨

  즉, .position() 메소드에서 기준으로 사용되는 부모 요소는 .offsetParent()메소드를 사용하여 확인할 수 있다.

    $(".me").offsetParent().css("border", "2px solid red");
  

• contents()

  선택한 요소의 자식(child) 요소를 모두 선택 (텍스트 노드와 주석 노드까지 모두 포함함)

  .children()와 거의 비슷하지만 텍스트 노드와 주석과 html요소까지 포함한다는것이 다름

    //단락 안의 모든 텍스트 노드를 찾아 굵은 체 태그로 감싸기
  
    $( "p" )
      .contents()
      .filter(function(){
        return this.nodeType !== 1;
      })
      .wrap( "<b></b>" );
  
    //iframe 안에서 링크의 배경색을 변경
  
    $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );