jQuery와 DOM 객체 간 변환

작은 쓰레기 같은 놈들 · 게시됨 2016. 1. 4. 오후 4:44:58

jQuery 객체란 무엇인가요?

--- DOM 객체를 jQuery를 통해 랩하여 생성되는 객체입니다. jQuery 객체는 jQuery에만 고유한 것이며 jQuery 내 메서드를 사용할 수 있습니다.

예를 들면:

$("#test").html()는 ID 테스트를 테스트 항목으로 사용하는 요소 내 HTML 코드를 가져옵니다. html()는 jQuery의 메서드입니다

이 코드는 DOM에서 코드를 구현하는 것과 동등합니다:

document.getElementById("id").innerHTML;

jQuery 객체는 DOM 객체를 랩핑하여 생성하지만, jQuery는 DOM 객체의 메서드를 사용할 수 없으며, DOM 객체도 jQuery 내 메서드를 사용할 수 없습니다. 무작위로 사용하면 오류가 발생할 수 있습니다. 예를 들어: $("#test").innerHTML, document.getElementById("id").html() 모두 잘못되었습니다.

또 한 가지 주목할 점은 #id를 선택기로 사용하는 경우에는 document.getElementById("id")에서 얻은 jQuery 객체와 DOM 객체가 동일하지 않다는 것입니다. 두 변환 내용은 아래를 참조하세요.

jQuery는 다르지만 관련도 있기 때문에 jQuery 객체와 DOM 객체는 서로 변환할 수도 있습니다. 두 객체를 변환하기 전에 먼저 관례를 제시합니다: 만약 하나가 jQuery 객체라면, 변수 앞에 $를 추가합니다. 예를 들어: var $variab = jQuery 객체; DOM 객체를 받으면 평소와 같습니다: var variab = DOM 객체; 이러한 합의는 설명과 구분의 편의를 위한 것일 뿐, 실제 사용에는 명시되어 있지 않습니다.

jQuery 객체에서 DOM 객체로:

jQuery 객체를 DOM 객체로 변환하는 두 가지 변환 방법이 있습니다: [index]와 .get(index);

(1) jQuery 객체는 [index] 메서드를 사용하여 얻을 수 있는 데이터 객체입니다.

예를 들어: var $v =$("#v"); jQuery 객체

var v=$v[0]; DOM 객체

alert(v.checked) // 이 체크박스가 체크되었는지 감지합니다

(2) jQuery 자체가 .get(index) 메서드를 통해 대응하는 DOM 객체를 제공합니다

예를 들어: var $v=$("#v"); jQuery 객체

var v=$v.get(0); DOM 객체

alert(v.checked) // 이 체크박스가 체크되었는지 감지합니다

DOM 객체에서 jQuery 객체로:

DOM 객체의 경우, $()로 DOM 객체를 랩만 감싸면 jQuery 객체가 됩니다. $(DOM 객체)

예를 들어: var v=document.getElementById("v"); DOM 객체

var $v=$(v); jQuery 객체

변환 후에는 jQuery의 메서드를 원하는 대로 사용할 수 있습니다.

위의 방법을 사용하면 jQuery 객체와 DOM 객체를 임의로 변환할 수 있습니다. DOM 객체는 DOM 내 메서드만 사용할 수 있고, jQuery 객체는 DOM 내 메서드를 사용할 수 없다는 점을 강조해야 합니다.

[JavaScript] jQuery와 DOM 객체 간 변환

관련 게시물

본 섹션