Native JavaScript Equivalents of jQuery Methods: the DOM and Forms

等同于JQuery方法的原生JavaScript:Dom和表單

JQuery訪問DOM節點使用CSS選擇器語法，例如

// ID為first的文章里所有summary類的段落
var n = $("article#first p.summary");

等價的原生js

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

document.querySelectorAll在所有的現代瀏覽器及IE8中都實現了，但是jQuery支持許多額外的高級選擇器，大多數情況下，在$()的包裝下運行的是document.querySelectorAll

原生JavaScript也提供了四種替代方法它們比querySelectorAll查詢速度更快，前提是你的項目能夠使用它們

getElementsByTagName和getElementsByClassName方法也能夠被用在某一個節點列表上，這樣可以限制特定的祖先元素，例如

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

作者做了一項測試，使用jQuery2.0和原生的JavaScript獲取一個頁面上的同一個元素節點，往往原生的速度要快，也證明了通過id或是class獲得節點要比querySelectorAll要快

jQuery提供了許多方法向DOM添加內容，例如

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

它的原理是使用了原生的innerHTML方法，例如

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

你也可是使用DOM創建技術，他們更安全但是不比innerHTML快

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

我們也能通過jQuery移除所有的子節點：

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

等價的原生js使用innerHTM：

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

或者一個小函數

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

最后，我們使用jQuery從DOM移除這整個元素：

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

或者原生js

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

SVG也有DOM，但是jQuery沒有向這些對象提供一個直接的操作方法，因為通常需要使用像createElementNS和getAttributeNS.但是有許多插件可供使用，但是更有效的方法是自己打代碼或者使用像Rapha?l和svg.js這樣的庫

使用jQuery或是原生js？
都不要

HTML5指出不同的input type，例如 emails, telephones, URLs, numbers, times, dates, colors和通過正則表達式的自定義表單，例如，如果你想要強制用戶輸入郵箱地址，可以使用：

<input type="email" name="email" required="required" />