jQuery 객체와 기본 DOM 객체 간의 차이점과 변환

본 글은 jQuery 객체와 네이티브 DOM 객체의 차이점과 변환에 대한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

차이점

jQuery 선택기로 얻은 jQuery 객체와 네이티브 JS의 document.getElementById()로 얻은 DOM 객체는 서로 다른 두 가지 유형이며 둘은 동일하지 않습니다. document.getElementById() document.querySelector取得的 DOM对象 是两种不同类型，两者是不等价的。
jQuery 无法使用 原生DOM对象的方法，原生DOM对象 也不能使用 jQuery 里的方法。乱使用会报错。

<p>我是对象</p>

原生DOM：document.querySelector('p').innerText
jQuery： $('p').text()

所以他们是不等同的，但他们最终取出的 DOM 是一致的。

示例

JSBin
output

原生 DOM 判断一个元素是否存在可以用document.querySelector查看它是否为null
因为 jQuery 是类数组对象。jQuery 则可以通过.length查看他的长度是否为0jQuery는 기본 DOM 개체의 메서드를 사용할 수 없으며 기본 DOM 개체는 jQuery의 메서드를 사용할 수 없습니다. 무차별적으로 사용하면 오류가 보고됩니다.

var p1 = document.querySelector('#p1')var $p1 = $(p1)

기본 DOM: document.querySelector('p').innerText

jQuery: $('p').text()

따라서 동일하지는 않지만 최종적으로 제거하는 DOM은 일관성이 있습니다.

예

JSBin

output

네이티브 DOM에 요소가 존재하는지 확인하려면 document.querySelector를 사용하여 해당 요소가 null인지 확인하면 됩니다.

jQuery는 배열과 유사한 객체이기 때문입니다. jQuery는 .length를 사용하여 길이가 0인지 확인하여 이 요소가 존재하는지 확인합니다

상호 변환

위의 JSBin 출력을 참조하여 데모 데모네이티브 DOM 객체를 jQuery 객체로 변환

var $p = $('p')var p1 = $p[0]var p2 = $p.get(1)

🎜🎜🎜🎜jQuery 객체를 네이티브 DOM 객체로🎜rrreee🎜🎜🎜🎜관련 권장사항: 🎜🎜🎜네이티브 j가 DOM에서 수행할 수 있는 작업은 무엇인가요? 네이티브 js로 DOM을 작동하는 방법🎜🎜🎜🎜 js의 cssText 사용 예(코드 예)🎜🎜

위 내용은 jQuery 객체와 기본 DOM 객체 간의 차이점과 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!