hoon's bLog

jQuery DOM method 기타 탐색 메서드, 필터링(filtering) 메서드 본문

IT/HTML, jQuery, Ajax

jQuery DOM method 기타 탐색 메서드, 필터링(filtering) 메서드

개발한기발자 2023. 7. 11. 10:12
반응형

기타 탐색 메서드

DOM 트리에서 요소의 탐색을 위해 사용되는 메서드
.add() : 선택한 요소의 집합에 전달받은 요소를 추가

$(function() {
    $("button").on("click", function() {
        $("li").add("p")                         // 선택한 <li>요소의 집합에 <p>요소를 추가함.
            .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경
    });
});

$(function() {
    $("button").on("click", function() {
        $("#list").append("<li>새로 추가된 아이템이에요!</li>");
    });
});
  • 위의 예제에서 알 수 있듯이 .add() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드
  • 하지만 .append() 메서드는 선택한 '요소'의 마지막에 새로운 요소나 콘텐츠를 추가

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

$(function() {
    $("button").on("click", function() {
        $("li").each(function() {            // 선택한 <li>요소 집합의 각 <li>요소를 선택함.
            $(this).toggleClass("boldFont"); // 각 <li>요소마다 클래스를 추가하거나 제거함.
        });
    });
});
  • 위의 예제는 선택한 <li>요소 집합의 각 <li>요소에 .each() 메서드를 사용하여 클래스를 추가하거나 제거하는 예제
  • 이처럼 .each() 메서드를 사용하면, 선택한 요소 집합의 각 요소마다 콜백 함수를 따로 실행가능

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

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

.offsetParent() : 선택한 요소를 위치시킬 때 기준으로 사용된 조상 요소를 선택 가능

$(function() {
    $("button").on("click", function() {
        // id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
        $("#para").offsetParent()
            .css("border", "1px solid red"); // 해당 요소의 CSS 스타일을 변경
    });
});
  • 위의 예제에서 아이디가 "para"인 요소를 웹 페이지에 위치시킬 때 기준이 되는 부모 요소는 position 속성값이 relative로 설정된 <ul>요소
  • 이렇게 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준
  • 만약 위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준으로 함!!

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

$(function() {
    $("button").on("click", function() {
        $("iframe")     // <iframe>요소의
            .contents() // 자식 요소를 모두 선택한 후,
            .find("a")  // 그 중에서 <a>요소를 모두 선택하고,
            .css("backgroundColor", "aqua"); // 선택된 모든 <a>요소의 CSS 스타일을 설정함.
    });
});
  • 위의 예제는 <iframe>요소의 모든 자식 요소를 선택한 후, 그 중에서 <a>요소만의 CSS 스타일을 변경하는 예제
  • 버튼을 누르면, <iframe>요소에 로드된 모든 자식 요소 중 <a>요소의 배경색만이 변경될 것입니다.
  • 이처럼 제이쿼리의 .contents() 메서드를 사용하면, <iframe>요소의 내용에도 직접 접근 가능

필터링(filtering) 메서드

DOM 트리에서 선택한 요소를 필터링하기 위한 메서드
.first() : 선택한 요소 중 첫 번째 요소를 선택
.last()  : 선택한 요소 중 마지막 요소를 선택

$(function() {
    $("#firstBtn").on("click", function() {
        $("li").first()                           // 선택한 <li>요소 중에서 첫 번째 요소만을 선택함.
            .css({"border": "2px solid green"});  // 해당 요소의 CSS 스타일을 변경
    });

    $("#lastBtn").on("click", function() {
        $("li").last()                            // 선택한 <li>요소 중에서 마지막 요소만을 선택함.
            .css({"border": "2px solid orange"}); // 해당 요소의 CSS 스타일을 변경
    });
});

.eq() : 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택

$(function() {
    $("#clockwiseBtn").on("click", function() {
        $("li").eq(1)                             // 선택한 <li>요소 중에서 두 번째 요소만을 선택함.
            .css({"border": "2px solid green"});  // 해당 요소의 CSS 스타일을 변경
    });

    $("#counterBtn").on("click", function() {
        $("li").eq(-1)                            // 선택한 <li>요소 중에서 뒤에서부터 첫 번째 요소만을 선택함.
            .css({"border": "2px solid orange"}); // 해당 요소의 CSS 스타일을 변경
    });
});
  • 위의 예제처럼 .eq() 메서드는 음의 정수도 인수로 전달 가능
  • 이때는 선택한 요소 집합의 맨 마지막 요소를 인덱스 -1로 놓고, 뒤에서부터 검색

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

  • 이 메서드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소 등을 전달 가능
  • 또한, 요소 집합의 각 요소를 검사할 수 있는 함수를 전달 가능
$(function() {
    $("button").on("click", function() {
        $("li").filter(":odd")                   // 선택한 <li>요소 중에서 인덱스가 홀수인 요소만을 선택함.
            .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경
    });
});
  • :odd : 인덱스가 홀수인 요소를 모두 선택하는 선택자
  • 하지만 위의 예제에서 :odd 선택자는 두 번째와 네 번째 요소를 선택
  • 따라서 :odd나 :even 선택자를 사용할 때는 언제나 인덱스가 0부터 시작한다는 사실을 염두에 두고 사용

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

  • 즉, .filter() 메서드와는 정반대로 동작하여 요소를 선택
$(function() {
    $("button").on("click", function() {
    // 선택한 <li>요소 중에서 인덱스가 2보다 작지 않은 요소만을 선택함.
    $("li").not(":lt(2)")
        .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경
    });
});
  • 위의 예제에서 .not() 메서드에 인수로 전달된 식별자는 '인덱스가 2보다 작은'이라는 의미를 가지는 식별자
  • 따라서 .not() 메서드는 인덱스가 2보다 작지 않은, 즉 인덱스가 2인 요소와 2보다 큰 요소를 모두 선택

.has() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택

  • 다음 예제는 선택한 <li>요소 중에서 자손 요소로 <span>요소를 가지고 있는 요소만의 스타일을 변경하는 예제
$(function() {
    $("button").on("click", function() {
        // 선택한 <li>요소 중에서 자손 요소로 <span>요소를 가지고 있는 요소만을 선택함.
        $("li").has("span")
            .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경
    });
});

.is() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참을 반환

$(function() {
    $("button").on("click", function() {
        // 선택한 <span>요소의 조상 요소 중에서 <ul>요소가 하나라도 존재하면 true를 반환함.
        if ($("span").parents().is("ul")) {
            $("#text").html("span 요소의 조상 요소에는 ul 요소도 존재합니다.");
        }
    });
});
  • 위의 예제에서는 우선 선택한 <span>요소의 모든 조상 요소를 다시 선택
  • 선택된 모든 조상 요소 중에 <ul>요소가 존재하는지 여부를 .is() 메서드를 통해 검사

.map() : 선택한 요소 집합의 각 요소마다 지정된 콜백 함수를 실행하고, 그 반환값으로 구성된 제이쿼리 객체를 반환

$(function() {
    $("button").on("click", function() {
        // 선택한 <li>요소마다 콜백함수를 실행하여 각 <li>요소의 id 값을 반환함.
        let ids = $("li").map(function() {
            return this.id;
        })
        .get()   // 반환된 모든 id 값을 하나의 배열로 반환함.
        .join(); // 배열의 모든 요소를 쉼표(,)로 구분하는 문자열로 반환함.
        $("#text").html(ids);
    });
});
  • 위의 예제는 선택한 <li>요소 집합의 각 요소마다 해당 요소의 id 값을 반환하는 콜백함수를 실행
  • 콜백함수의 실행으로 반환되는 값들은 .get() 메서드를 통해 하나의 배열로 반환되며, 다시 .join() 메서드를 통해 문자열로 변환되어 반환

.slice() : 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택

  • 다음 예제는 선택한 <li>요소 중에서 인덱스가 1과 같거나 그 이상인 요소만의 스타일을 변경하는 예제
$(function() {
    $("button").on("click", function() {
        // 선택한 <li>요소 중에서 인덱스가 1과 같거나 그 이상인 요소만을 선택함.
        $("li").slice(1)
            .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경
    });
});

 Reference

https://www.tcpschool.com/jquery/jq_elementTraversing_etc

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

728x90
반응형
저작자표시 비영리

'IT > HTML, jQuery, Ajax' 카테고리의 다른 글

jQuery attr prop, 속성 프로퍼티 설정  (1) 2023.07.13
jQuery element area 요소의 영역  (2) 2023.07.12
jQuery parent sibling children element 부모 형제 자식 요소 탐색  (0) 2023.07.10
jQuery element 요소 복사 및 삭제  (4) 2023.07.07
jQuery 요소 Element 선택 및 선택자 Selector 사용  (0) 2023.07.06
'IT/HTML, jQuery, Ajax' Related Articles more