jQuery 입문 | 요소의 탐색 | 기타 탐색 메소드 .add() .each() .end() .offsetParent()

Tags:

기타 탐색 메소드

DOM 트리에서 요소의 탐색을 위해 사용되는 기타 메소드는 다음과 같다.

메소드 설명
.add() 선택한 요소에 다른 요소를 추가 선택한다.
.addBack() 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가한다.
.each() 선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행한다.
.end() 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원한다.
.offsetParent() DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택한다.
.contents() 선택한 요소의 자식(child) 요소를 모두 선택한다. (텍스트 노드와 주석 노드까지 모두 포함함)

.add() 메소드

.add() 메소드는 선택한 요소에 다른 요소를 추가로 선택한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>
<span>데브쿠마입니다.</span>
<div>반갑습니다.</div>

아래 예제는 <p> 요소를 탐색하여 선택하고, 추가로 <div>를 선택하여 css 스타일을 설정한다.

$("p").add("div").css({"border": "2px solid green"});

코드 실행

위에 예제를 다르게 표현하면 아래와 같다.

$("p, div").css({"border": "2px solid green"});

주위할 점

  • .add() 메소드는 선택한 요소에 다른 요소를 추가로 선택하는 것이지, 새로운 요소를 추가하여 넣는 메소드가 아니다.
    새로운 요소를 추가할 때는 .append() , preppend() 등을 사용한다.

.addBack() 메소드

.addBack() 메소드는 마지막으로 선택한 요소를 이전의 요소를 추가로 선택한다.

아래와 같이 HTML 요소가 있을 때,

<div id="after">
  <p>.addBack() 적용 후</p>
  <p>안녕하세요. 데브쿠마입니다.</p>
</div>

아래 예제는 먼저 <div id="after"> 요소에서 find()를 이용하여 <p>를 선택하고, 추가로 .addBack()로 <div id="after">를 선택하여 CSS 스타일를 설정한다.

$("div#after").find("p").addBack().css({"backgroundColor": "aqua"});

코드 실행

위의 예제에서 만약 .addBack() 메소드가 없다면, <p> 요소만 스타일을 설정하게 된다.

.each() 메소드

.each() 메소드는 선택한 요소들을 각 요소마다 반복하면서 전달받은 콜백 함수를 실행한다.

아래와 같이 HTML 요소가 있을 때,

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

아래 예제는 <li> 요소를 선택하여 반복하면서 콜백 함수를 실행한다. 여기서 콜백 함수는 index를 전달 받아 짝수인 경우만 class를 추가하고 있다.

$("li").each(function(index) {
    if (index % 2 == 0) {
        $(this).addClass("even");
    }
});

코드 실행

.end() 메소드

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

아래와 같이 HTML 요소가 있을 때,

<p id="after">.end() 적용후 <span>데브쿠마입니다.</span></p>

아래 예제는 먼저 <p id="after"> 요소에서 find()를 이용하여 <span>를 선택했다가 .end()로 .find()를 취소하고 <p id="after">를 선택하여 css 스타일를 설정한다.

$("p#after").find("span").end().css({"border": "2px solid green"});

코드 실행

위의 예제에서 만약 .end() 메소드가 없다면, <p> 요소 안에 <span>요소를 선택하여 스타일을 설정하게 된다.

.offsetParent() 메소드

.offsetParent() 메소드는 DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 jQuery 객체로 만들어(wrapped) 준다. 여기서 말한 위치(positioned)는 CSS의 속성인 relative, absolute, fixed를 의미한다.

만약 위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준으로 삼게 된다.

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

아래와 같이 HTML 요소가 있을 때,

<div class="container">
    <div>div (할아버지)
        <ul style="position:relative;">ul (부모)
            <li class="me">li (자식)
                <span>span (손자)</span>
            </li>
        </ul>
    </div>
</div>

아래 예제에서 클래스가 me인 요소에서 기준이 되는 부모 요소는 CSS 스타일이 position:relative; 로 설정된 <ul>요소이다.

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

코드 실행

위 예제에서 <ul>요소에 position:relative; 가 없다면 <html>요소가 기준이 된다.

.contents() 메소드

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

위의 예제는 <iframe> 요소의 모든 자식 요소를 선택하고, 그 안에서 <a> 요소만의 CSS 스타일을 변경한다.
버튼을 누르면, <iframe> 요소에 로드된 모든 자식 요소 중 <a> 요소의 배경색이 변경될 것이다.

$("button").on("click", function() {
    $("iframe")	.contents().find("a").css("backgroundColor", "#BADA55");
});

코드 실행

참고




최종 수정 : 2021-08-27