기타 탐색 메소드
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");
});
참고
- http://api.jquery.com/add/
- http://api.jquery.com/each/
- https://api.jquery.com/end/
- https://api.jquery.com/offsetParent/
- https://api.jquery.com/contents/
'jQuery' 카테고리의 다른 글
[jQuery] 요소의 영역 - 요소의 크기 .width() .height() (0) | 2018.11.29 |
---|---|
[jQuery] 요소의 탐색 - 필터링 메소드 .first() .last() .eq() .filter() .not() .is() (0) | 2018.11.29 |
[jQuery] 요소의 탐색 - 기타 탐색 메소드 .add() .each() .end() .offsetParent() (0) | 2018.11.29 |
[jQuery] 요소의 탐색 - 형제 요소의 탐색 .siblings() .next() .prev() (0) | 2018.11.29 |
[jQuery] 요소의 탐색 - 하위 요소의 탐색 .children() .find() (0) | 2018.11.29 |
[jQuery] 요소의 탐색 - 상위 요소의 탐색 .parents() .closest() (0) | 2018.11.29 |