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中文网其他相关文章！