[jQuery] - 클래스(Class), 부모 - 형제 노드(태그) 제어

jQuery에서 선택된 노드(태그)들에 대한 클래스들을 직접 제어, 선택된 노드의 부모 노드, 자식 노드, 형제 노드들에 대한 각 노드들을 제어할 때 자주 사용되는 메서드를 알아보도록 하겠습니다.

 

 

 

1. 클래스 제어 메서드 :  addClass(), removeClass(), toggleClass()

문법)

1. $("선택자").addClass("class01");                //  class01 값은 예시입니다.

2. $("선택자").removeClass("class01");

3. $("선택자").toggleClass("class01");

- addClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 추가합니다.

- removeClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 삭제합니다.

- toggleClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 토글 형식으로 전환합니다. 클릭 이벤트를 구현할 때 주로 사용됩니다.

 

아래와 같이 버튼 하나를 생성합니다.

<button type="button" class="btn btn-defalut" >클래스 제어</button>

 

// 기존 Javascript 문법으로 클래스를 추가, 삭제하는 경우 

var btn = document.querySelector(".btn");
btn.classList.add("class_01");     // 클래스 추가 : 클래스를 다루기에 classList
btn2.classList.remove("class_01");  // 클래스 삭제 

// 한 번에 나열하여 작성하는 경우

var btn = document.querySelector(".btn").classList.add("class_01");
var btn2 = document.querySelector(".btn").classList.remove("class_01");

위와 같이 Javascript 문법으로 직접 노드를 querySelector()로 지정하여 클래스를 추가 삭제할 수 있었습니다.

하지만 이제 jQuery의 클래스 제어 메서드로 아래와 같이 코드 작성이 가능합니다.

 

    $(".btn").addClass("class01");   //클래스 추가
    $(".btn").removeClass("class01");  // 클래스 삭제
    $(".btn").hasClass("class01");   // 선택 노드의 클래스 존재 여부 확인

위와 같이 클래스 추가(addClass), 삭제(removeClass), 특정 클래스 존재 여부 확인(hasClass)가 가능합니다.

 

 

    // toggleClass() : 주로 클릭 이벤트에서 사용된다.
    $(".btn").click(function() {       //클릭 이벤트를 걸어주기 위한 익명함수 선언
        $(".btn").toggleClass("class01");      
    })

해당 코드는 토글 형식으로 클래스를 지정해 주기 위해 선언한 코드입니다.

보면 click 이벤트를 주기 위해 Javascript의 익명함수를 선언한 것을 알 수 있습니다. 다음 포스팅에서 jQuery의 이벤트 제어 부분에서 더 자세히 다뤄보도록 하겠으며 현재 포스팅에선 toggle 형식으로 클래스를 생성해 줄 수 있는 부분에 초점을 맞춰보도록 하겠습니다.

 

 

 

 

2. 부모 - 자식 - 형제, 노드 제어 메서드 : closest(), children(), first(), find(), next(), prev()

인접 노드 제어 시, 가장 자주 사용되는 메서드에 대해 정리하였습니다.

 

문법)

1. $("선택자").closest("td");          // td 노드는 예시입니다.

2. $("선택자").children();

3. $("선택자").first(); 

4. $("선택자").find("td");

5. $("선택자").next();

6. $("선택자").prev();

 

- closest() 메서드는 선택된 노드에 대하여, 가장 최대로 근접한 매개변수로 전달 받은 단일 부모 노드를 탐색합니다.
- children() 메서드는 선택된 노드에 대하여 모든 자식 노드를 탐색합니다.

- first() 메서드는 선택된 노드에 대하여 첫 번째 자식 노드를 탐색합니다.

- find() 메서드는 선택된 노드에 대하여 매개변수로 전달 받은 노드가 있는지 탐색합니다.

- prev() 메서드는 선택된 노드에 대하여 이전 형제 노드를 탐색합니다.

- next() 메서드는 선택된 노드에 대하여 다음 형제 노드를 탐색합니다.

 

 

아래의 코드를 보며 인접된 노드들에 대한 제어 방법을 확인해 보겠습니다.

 

    <table class="class01">
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>버튼</th>
            <th>테스트</th>
        </tr>
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>
                <button type="button" class="btn">버튼</button>
            </td>
                <span><i class="test">테스트1</i></span>
            <td>테스트2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>이순신</td>
            <td>
                <button type="button" class="btn">버튼</button>
            </td>
                <span><i class="test">테스트1</i></span>
            <td>테스트2</td>
        </tr>
    </table>

 

// 현재 버튼이 모두 동일하기에 this 키워드를 이용하여 클릭한 버튼의 구분을 주도록 함.

console.log($(this).closest("td"));  // 선택 노드 기준으로 가장 근접한 td 부모 노드 탐색
console.log($(this).closest("tr"));  // 선택 노드 기준으로 가장 근접한 tr 부모 노드 탐색
console.log($(this).closest(".class01"));  // 선택 노드 기준으로 가장 근접한 클래스 class01 탐색

첫 번째 <button> 태그를 기준으로 가장 인접한 부모 노드인 <td> 노드를 탐색하였으며 그 위의 부모 노드인 <tr> 태그까지 탐색이 완료된 코드입니다. 세 번째 코드처럼 .으로 해당 class 속성 값을 가지는 클래스를 탐색할 수도 있습니다.

 

    // tr 노드의 모든 자식 노드를 탐색하여 리스트의 형태로 반환
    console.log($(this).closest("tr").children());

children() 메서드로 tr 노드에 대한 모든 자식 노드를 리스트의 형태로 가져옵니다.

다중 노드를 가져오기에 리스트(배열)의 형태로 가져오게 됩니다.

 

 

// tr 노드의 모든 자식 노드에서 가장 첫 번째 자식 노드를 탐색
console.log($(this).closest("tr").children().first());

first() 메서드로 tr 노드에 대한 모든 자식 노드들 중에서 가장 첫 번째 노드를 탐색합니다.

 

 

// tr 노드의 모든 자식 노드에서 가장 마지막 자식 노드를 탐색
console.log($(this).closest("tr").children().last());

last() 메서드로 tr 노드에 대한 모든 자식 노드들 중에서 가장 마지막 노드를 탐색합니다.

 

 

// tr 노드의 모든 자식 노드에서 class 속성값이 test인 노드를 탐색
console.log($(this).closest("tr").find(".test"));

find() 메서드로 tr 노드에 대해서 class 속성값이 "test"인 노드를 탐색합니다.

 

 

 //tr 노드의 이전 형제 탐색
 console.log($(this).closest("tr").prev());

prev() 메서드로 tr 노드에 대하여 해당 노드의 이전 형제 노드를 탐색합니다.

 

 

  //tr 노드의 다음 형제 탐색
  console.log($(this).closest("tr").next());

next() 메서드로 tr 노드에 대하여 해당 노드의 다음 형제 노드를 탐색합니다.

 

 

 

 

jQuery에서 선택된 노드(태그)들에 대한 클래스들을 직접 제어, 선택된 노드의 부모 노드, 자식 노드, 형제 노드들에 대한 각 노드들을 제어할 때 자주 사용되는 메서드를  정리해 보았습니다. 다음 주제는 jQuery의 이벤트 제어에 대해 포스팅하도록 하겠습니다.

 

===========================================================================

개인적으로 공부하고 내용을 다시 정리하며 작성한 글입니다.

오타나, 내용 상 틀린 내용이 있을 수 있으니 지적해 주시면 감사하겠습니다.

해당 주제로 추가적인 포스팅이 필요하다고 생각되면 작성한 글이 수정될 수 있는 점 참고 부탁드립니다.