제이쿼리를 사용하면 항상 객체는 제이쿼리 객체가 된다. 하지만 개발하다 보면 제이쿼리 객체 말고
html 원시 DOM 형태의 객체가 필요할 때가 있다.
이 제이쿼리는 DOM 형태의 객체로 변환하는 get()이라는 배열 함수가 있는 데 사용법을 알아보고
이 함수 말고도 다른 형태로 DOM 객체를 얻을 수 있는 방법을 예제를 통해서 알아보자.
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log($('p').get(2));
console.log($('h2').get(0));
console.log($('div').get(1));
// 다른 방법
console.log($('p')[5]);
console.log($('h2')[1]);
console.log($('div')[0]);
});
</script>
</head>
<body>
<div>
<h2>div 요소 - 1</h2>
<p> 테스트 1-1</p>
<p> 테스트 1-2</p>
<p> 테스트 1-3</p>
</div>
<div>
<h2>div 요소 - 2</h2>
<p> 테스트 2-1</p>
<p> 테스트 2-2</p>
<p> 테스트 2-3</p>
</div>
<div>
<h2>div 요소 - 3</h2>
<p> 테스트 3-1</p>
<p> 테스트 3-2</p>
<p> 테스트 3-3</p>
</div>
</body>
</html>
이 html 코드의 내용을 보면 div 각 태그안에 식별이 쉽게 제목 요소와 p 태그를 사용했다.
console.log를 보면 선택자에 .get(index)를 이용하여 DOM 형태의 객체를 반환받을 수 있다.
다른방법으로는 $('선택자')[index]를 이용해서 DOM 형태로 객체를 반환받을 수 있다.
위 코드 중 2가지만 확인해 보자.
테스트 진행 코드
// 첫번째 확인 코드
$('p').get(2);
$('p')[5];
// 두번째 확인 코드
$('div').get(1);
$('div')[0];
결과화면
첫 번째
두 번째
이렇게 $('선택자') 배열[] 이 안에 내가 가져오고 싶은 index 숫자를 넣으면 그 숫자에 해당하는 태그의 DOM 객체를
반환 받을 수 있다.
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 제이쿼리(jQuery) 객체와 DOM 객체 헷갈리면 봐라! 100% 이해 (0) | 2022.03.17 |
|---|---|
| jQuery - jQuery와 다른 자바스크립트 라이브러리가 충돌 날 때 해결방법 (0) | 2022.03.17 |
| jQuery - 가시성(visible/hidden)을 기준으로 요소 선택하기 (0) | 2022.03.16 |
| jQuery - 현재 애니메이션(animate) 중인 요소 선택하기 (0) | 2022.03.16 |
| jQuery - 라디오(radio), 체크박스(checkbox) 클릭 된 요소 알기 (0) | 2022.03.15 |