document.getElementById 和jQuery $() 之間的區別

提供的程式碼片段使用兩種不同的方法來擷取具有ID的元素“內容”。然而，這些方法之間存在細微的差別。

document.getElementById

此方法傳回一個 DOM（文件物件模型） 元素，這是 HTML 元素的本機表示。它是 JavaScript 標準庫的一部分，可讓您存取和操作文件中的特定元素。

jQuery $()

載入 jQuery 時，$ () 函數提供了另一種檢索元素的方法。然而，它會傳回一個 jQuery 物件，它透過附加功能擴展了 DOM 元素。

區別

這兩種方法之間的主要區別在於返回值中：

• document.getElementById('contents')回傳一個DOM 元素.
• $('#contents') 回傳一個jQuery 物件.

雖然這兩個物件表示相同的 HTML 元素，但它們的功能不同。 jQuery 物件允許更進階的操作和 jQuery 方法的連結。

要獲得與document.getElementById 相同的結果，您可以存取jQuery 物件中的第一個元素：

var contents = $('#contents')[0]; //returns a DOM element

透過使用此方法，您可以利用jQuery的強大功能，同時仍檢索底層 DOM 元素。