jQuery方法的本機JavaScript等效物：DOM和形式

核心要點

• jQuery 對於需要支持舊版 Internet Explorer 或編寫類似 jQuery 的庫所需時間比開發應用程序時間更長的開發者來說是一個有用的工具。但是，對於大多數其他情況，使用原生 JavaScript 效率更高，因為它無需加載像 jQuery 這樣的大型庫。
• 常用 jQuery 方法（例如 DOM 選擇器和 DOM 操作）的原生 JavaScript 等效項通常比其 jQuery 對應項執行得更快、更有效。例如，使用 document.getElementsByClassName 或 document.getElementById 可能比使用 jQuery 的 $() 包裝器快得多。
• HTML5 提供對各種常用輸入類型的內置支持，無需為表單驗證添加額外的 JavaScript 或 jQuery 代碼。不支持這些新類型的舊瀏覽器將恢復為標准文本輸入字段，需要服務器端驗證。

關於我最近的《你真的需要 jQuery 嗎？ 》一文，爭論仍在繼續，但總而言之，使用jQuery 有兩個原因：1. 你需要支持IE6/7/8（記住你無法遷移到jQuery 2.0），或者2. 沒有jQuery，你將花費比開發應用程序更長的時間來編寫類似jQuery 的庫。

對於其他所有情況，請務實。 jQuery 是一個 270KB 的通用庫。你不太可能需要它提供的所有功能，即使你省略某些模塊，它仍然是一大塊代碼。你可能從 CDN 加載 30KB 的縮小版本，但瀏覽器必須在執行任何其他操作之前停止處理並在每一頁上解析代碼。這是一系列文章中的第一篇，展示常用 jQuery 方法的原生 JavaScript 等效項。雖然你可能希望將其中一些包裝在更短的類似別名的函數中，但你肯定不需要創建自己的類似 jQuery 的庫。

DOM 選擇器

jQuery 允許使用 CSS 選擇器語法進行 DOM 節點選擇，例如：

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

原生等效項：

var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll 在所有現代瀏覽器和 IE8 中都已實現（儘管這僅支持 CSS2.1 選擇器）。 jQuery 對更高級的選擇器提供了額外的支持，但大多數情況下，它會在 $() 包裝器內運行 document.querySelectorAll。原生 JavaScript 還提供了四種替代方案，如果您可以使用它們，它們幾乎肯定比 querySelectorAll 更快：

1. document.querySelector(selector) — 只獲取第一個匹配的節點
2. document.getElementById(idname) — 按其 ID 名稱獲取單個節點
3. document.getElementsByTagName(tagname) — 獲取與元素匹配的節點（例如 h1、p、strong 等）。
4. document.getElementsByClassName(class) — 獲取具有特定類名的節點

getElementsByTagName 和 getElementsByClassName 方法也可以應用於單個節點以將結果限制為僅後代，例如：

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

讓我們進行一些測試。我編寫了一些小的腳本，以從我的《你真的需要 jQuery 嗎？ 》文章中檢索所有註釋節點 10,000 次。結果：

代码	时间
// jQuery 2.0<br>var c = $("#comments .comment");	4,649 ms
// jQuery 2.0<br>var c = $(".comment");	3,437 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll("#comments .comment");	1,362 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll(".comment");	1,168 ms
// 原生 getElementById / getElementsByClassName<br>var n = document.getElementById("comments");<br>var c = n.getElementsByClassName("comment");	107 ms
// 原生 getElementsByClassName<br>var c = document.getElementsByClassName("comment");	75 ms

我不能聲稱嚴格的實驗室條件，它也不反映現實世界的使用情況，但在這種情況下，原生 JavaScript 的速度提高了 60 倍。它還說明，按 ID、標籤或類獲取節點通常優於 querySelectorAll。

DOM 操作

jQuery 提供了幾種方法來向 DOM 添加更多內容，例如：

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

在表面之下，jQuery 使用原生 innerHTML 方法，例如：

var n = document.querySelectorAll("article#first p.summary");

你也可以使用 DOM 構建技術。這些更安全，但很少比 innerHTML 快：

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

我們還可以刪除 jQuery 中的所有子節點：

$("#container").append("<p>more content</p>");

使用 innerHTML 的原生等效項：

document.getElementById("container").innerHTML += "<p>more content</p>";

或一個小函數：

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

最後，我們可以在 jQuery 中從 DOM 中刪除整個元素：

$("#container").empty();

或原生 JavaScript：

document.getElementById("container").innerHTML = null;

可縮放矢量圖形 (SVG)

核心 jQuery 庫已開髮用於處理當前文檔。 SVG 也具有 DOM，但 jQuery 不提供對這些對象的直接操作，因為它通常需要使用諸如 createElementNS 和 getAttributeNS 之類的方法。它可以工作，並且有幾個插件可用，但自己編寫代碼或使用專門的 SVG 庫（如 Raphaël 或 svg.js）效率更高。

HTML5 表單

即使是最基本的 Web 應用程序也都會有一兩個表單。你應該始終在服務器端驗證用戶數據，但理想情況下，你將使用客戶端驗證來補充它，以便在提交表單之前捕獲錯誤。客戶端驗證很簡單：1. 表單提交時運行一個函數。 2. 如果遇到任何問題，則停止提交並顯示錯誤。

你可以使用 jQuery。你可以使用原生 JavaScript。你應該選擇哪個？ 兩者都不選。 HTML5 內置支持各種常用輸入類型，例如電子郵件、電話、URL、數字、時間、日期、顏色和基於正則表達式的自定義字段。例如，如果你想強制用戶輸入電子郵件地址，請使用：

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

除非你需要更多複雜的功能（例如比較兩個或多個字段或顯示自定義錯誤消息），否則無需額外的 JavaScript 或 jQuery 代碼。舊版瀏覽器（包括 IE9 及以下版本）不理解新類型，並將恢復為標准文本輸入字段。這些用戶將回退到服務器端驗證；這並不是一個很好的體驗，但你可以應用一個 shim 或希望這些人看到光明併升級。在我的下一篇文章中，我們將研究原生的 CSS 類操作和動畫。

關於 jQuery 和原生 JavaScript 的常見問題

（此處省略了FAQ部分，因為該部分內容與圖片和文章主體關聯性較弱，且篇幅較長，可以單獨處理。）

以上是jQuery方法的本機JavaScript等效物：DOM和形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！