在JavaScript中,DOM物件與jQuery物件的區別與轉換

胡志傲發表於2024-04-27

Dom原生物件和jQuery物件的區別:

jQuery選擇器得到的jQuery物件和標準的js中的document.getElementById()取得的dom物件是兩種不同型別,兩者不等價。

注: js原生獲取的dom是一個物件;jQuery物件就是一個陣列物件。

JQuery無法使用DOM物件的任何方法,同樣的DOM物件也不能使用JQuery裡的方法,否則會報錯

正確例項:

$('#id').html();

document.getElementById('id').innerHTML;

錯誤案例:

$('id').innerHTML;

document.getElementById('id').html();

DOM物件和jQuery物件之間可以相互轉換:

將DOM物件轉換為jQuery物件:

要將一個DOM物件轉換為jQuery物件,你只需使用 $() 函式並將DOM物件作為引數傳遞。例如:

var domElement = document.getElementById('myElement'); // 獲取DOM物件
var jQueryElement = $(domElement); // 轉換為jQuery物件

將jQuery物件轉換為DOM物件:

你可以透過兩種方式將jQuery物件轉換為DOM物件:

使用 [index] 訪問符:

var jQueryElement = $('#myElement'); // 獲取jQuery物件
var domElement = jQueryElement[0]; // 轉換為DOM物件

使用 .get() 方法:

var jQueryElement = $('#myElement'); // 獲取jQuery物件
var domElement = jQueryElement.get(0); // 轉換為DOM物件

兩種方法都可以將jQuery物件轉換為相應的DOM物件,第一種方法更為簡潔。

相關文章