JQuery 노드 다루기


1. 노드찾기


* 아이디 이름으로 찾기    :    $('#아이디명')

* 클래스 이름으로 찾기    :    $('.클래스명')

* 태그 이름으로 찾기       :    $('<태그명>')

* 속성으로 찾기             :    $('속성 옵션')   ex) input[type="text"] 


2. 노드다루기


* 노드 갯수 구하기    :    $('노드').length    ,    $('노드').size();

//length 와 size() 는 같은 결과를 반환합니다.


* n번째 노드에 접근  :    $('노드').eq(index);


* 특정 노드 찾기      :    $('노드').filter('선택자');    $('노드').find('선택자');

/*

 filter는 노드 전체에서 해당 선택자를 찾고 find는 해당 노드의 자식요소에서 해당 선택자를 찾습니다.

 (find에 반환값에서 '노드'는 제외됩니다.)

*/


3. 자식 노드 찾기


* 전체 자식 노드 찾기    :    $('노드').contents();    $('노드').children();

/*

 children()    vs    contents()

 children() 은 특정 노드 하위에 위치한 모든 자식 노드 중 태그 노드만을 찾습니다.

 반면, contents()는 특정 노드 하위에 위치한 텍스트 노드를 포함한 모든 자식 노드를 찾습니다.


 children()    vs    find()

 children() 은 특정 노드 `바로` 하위에 위치한 모든 자식 노드를 찾습니다.

 반면, find() 는 `바로` 하위에 위치한 노드에서가 아닌 하위에 위치한 모든 노드를 찾습니다.

*/


* 특정 자식 노드 찾기    :    $('노드').children('선택자');

//노드 바로 하위에 있는 자식요소 중 특정 '선택자' 요소를 모두 찾습니다.


* 첫번 째 자식 노드 찾기    : 

  $('노드').children().eq(0);

  $('노드').children().first();

  $('노드').children(':first');

  $('노드').children(':eq(0)');


* 마지막 자식 노드 찾기    :

  $('노드').children().last();

  $('노드').children(':last');

  $('노드').children().eq($('노드').children().length -1);

  $('노드').children().eq(-1);

  $('노드').children(':eq(-1)');


* n번 째 자식 노드 찾기    :    $('노드').children().eq(n);    ,    $('노드').children(':eq(n)');





4. 부모 노드 찾기


* 부모 노드 찾기        :    $('노드').parent();

//바로 위에 있는 부모 노드를 찾습니다.


* 조상 노드 찾기    :    $('노드').parents();

//해당 노드 상위의 모든 부모 노드를 찾습니다.


* 특정 조상 노드 찾기    :    $('노드').parents('선택자');

//해당 노드 상위의 모든 부모 노드 중 선택자에 해당하는 부모를 찾습니다.


5. 형제 노드 찾기


* 이전 형제 노드 찾기    :    

  $('노드').prev();

  //바로 이전에 있는 형제 노드를 찾습니다.


  $('노드').prevAll();

  //이전에 있는 모든 형제 노드를 찾습니다.


  $('노드').prevAll('선택자');

  //이전에 있는 모든 형제노드 중 선택자에 해당하는 형제노드를 찾습니다.


* 다음 형제 노드 찾기    :

  $('노드').next();

  //바로 다음에 있는 형제 노드를 찾습니다.


  $('노드').nextAll();

  //다음에 있는 모든 형제 노드를 찾습니다.


  $('노드').nextAll('선택자');

  //다음에 있는 모든 형제노드 중 선택자에 해당하는 형제노드를 찾습니다.


6. 노드 생성 및 추가


* 노드생성    :    

  $('Dom문자열')    ex) $('<li>li노드생성</li>');

  $('선택자').clone();    // 선택자에 해당하는 노드 복사(deep copy)


* 자식 노드로 추가    :

  $('부모노드').prepend($추가노드);

  //부모노드의 자식노드 중 가장 첫번 째 자식 노드로 추가


  $('자식노드').prependTo($부모노드);

  //자식노드를 부모노드의 자식 중 첫번 째에 추가(prepend와 기능은 같다)


  $('부모노드').append($자식노드);

  //부모노드의 자식노드 중 가장 마지막 번째 자식노드로 추가


  $('자식노드').appendTo($부모노드);

  //자식노드를 부모노드의 자식 중 마지막 번째에 추가(append와 기능은 같다)


* 형제 노드로 추가    :

  $('기준노드').after($추가노드);

  //추가노드를 기준노드의 바로 다음 형제노드로 추가


  $('추가노드').insertAfter($기준노드);

  //기준노드의 바로다음 형제로 추가노드를 추가(after과 기능은 같다)


  $('기준노드').before($추가노드);

  //추가노드를 기준노드의 바로 이전 형제 노드로 추가.


  $('추가노드').insertBefore($기준노드);

  //기준노드의 바로이전 형제로 추가노드를 추가(before과 기능은 같다)



7. 노드의 이동 및 삭제


* 노드 이동    :

  노드를 특정 노드의 첫번째나 마지막번째 자식노드의 위치로 이동 시키고 싶은 경우 노드를 추가할 때 사용하는 

  prepend, prependTo, append, appendTo를 활용하면 된다.

  추가하고자 했던 노드에 이동 시키고자 하는 노드를 넣어주면 같은 방식으로 동작한다.


  이와 마찬가지로 자식노드가 아닌 형제 노드로 이동시키고 싶은경우

  after, insertAfter, before, insertBefore 을 사용하면 된다.

  

  ex)

  $('부모노드').prepend($이동노드)   //부모노드의 자식노드 중 첫번째 위치에 이동시키고자 하는 노드를 이동시킨다.

  $('기준노드').before($이동노드)     //기준노드의 바로 이전의 형제노드에 이동시키고자 하는 노드를 이동시킨다.


* 노드의 삭제    :    $('노드').remove()




  1. 2018.03.20 13:34

    비밀댓글입니다

+ Recent posts

티스토리 툴바