.contents()함수는 일치하는 요소 내부의 텍스트 노드를 포함한 자식요소들을 가져올 수 있는 함수입니다.
원문 링크 
http://api.jquery.com/contents/
- .contents()
jQuery 객체는 DOM 요소 집합들을 표현할 수 있습니다. .contents() 함수는 DOM 트리에서 선택된 요소들의 자식 요소들을 찾아 내는 동시에 새로운 jQuery 객체를 생성할 수도 있습니다. .contents() 함수와 .children() 함수는 유사한 함수입니다. 단, 반환되는 결과에 텍스트 노드(text node)의 존재여부의 차이점이 있습니다.
.contents 함수는 아이프레임의 내용도 가져올 수 있습니다. 단 조건이 있는데 아이프레임을 품은 페이지와 아이프레임의 페이지가 같은 도메인에 위치하고 있어야 합니다.
두 개의 <br />태그로 구분된 텍스트 노드들로 구성된 간단한 <div>에 대해 생각해 보시죠:
<div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /> <br /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
자, 위 마크업에 .contents함수를 사용하여 3개의 p 태그로 재구성해 보겠습니다.
$('.container').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('<p></p>')
.end()
.filter('br')
.remove();
제일 처음 <div class="container"> 요소를 찾습니다. 찾은 다음 nodeType이 3, 즉 text node를 추출(filter)하여 p 태그로 감쌉니다. 다시한번 br 태그를 추출(filter)하여 그 태그를 제거(remove)하는 스크립트가 되겠습니다. 별로 어렵지 않으시죠?
예 제
p 태그안의 텍스트 노드를 찾아서 진하게 태그(b)를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
</body>
</html>미리보기
this.nodeType != 1 구문은 해당 노드가 엘리먼트, 즉 태그가 아니라면 b 태그를 적용하게 됩니다. 잘 보시면 A 태그로 링크걸린 텍스트는 진하게 되지 않은걸 볼 수 있습니다.
노드 타입에 대해 더 궁금하신 분들은 https://developer.mozilla.org/en/nodeType에 방문해 보세요.
예 제
아이프레임 안의 A 태그들의 배경색을 바꿔줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
미리보기
아이프레임 안에 내용도 조작할 수 있다는 걸 보여주는 예제입니다. 단 같은 도메인에 위치해 있어야 합니다. 위에서도 말씀드렸죠? :) (그래서 여기서도 스크립트 에러가 나게 됩니다.)
휴~ 여수입니다. 한동안 여기에서 빡신 플젝을 수행할 듯 합니다. 한달정도 꾸준한 포스팅을 하지 못했더니 글쓰기가 점점 더 힘들어지네요. 그래도 힘내서 틈틈히 계속 써봐야 겠습니다. 에혀~
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8) | 2011.05.12 |
|---|---|
| jQuery API 정복 - 인덱스로 요소 찾기, eq() (4) | 2011.05.02 |
| jQuery API 정복 - 이전 선택요소로 돌아가기, end() (2) | 2011.04.29 |
| jQuery API 정복 - 선택된 요소만큼 루프, each() (4) | 2011.04.28 |
| jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() (1) | 2011.04.21 |
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |