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

Native JavaScript Equivalents of jQuery Methods: the DOM and Forms 等同于JQuery方法的原生JavaScript:Dom和表单原文地址
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查询速度更快，前提是你的项目能够使用它们

document.querySelector(selector) --仅取得地一个匹配到的节点
document.getElementById(idname) --取得一个节点通过它的ID
document.getElementsByTagName(tagname) --取得匹配一个元素节点的节点列表
document.getElementsByClassName(class) --取得一个确切的类名的节点列表

getElementsByTagName和getElementsByClassName方法也能够被用在某一个节点列表上，这样可以限制特定的祖先元素，例如

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

作者做了一项测试，使用jQuery2.0和原生的JavaScript获取一个页面上的同一个元素节点，往往原生的速度要快，也证明了通过id或是class获得节点要比querySelectorAll要快
DOM操作 jQuery提供了许多方法向DOM添加内容，例如

$("#container").append("more content ");

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

document.getElementById("container").innerHTML += "more content ";

你也可是使用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 SVG也有DOM，但是jQuery没有向这些对象提供一个直接的操作方法，因为通常需要使用像createElementNS和getAttributeNS.但是有许多插件可供使用，但是更有效的方法是自己打代码或者使用像Rapha?l和svg.js这样的库
HTML5表单使用jQuery或是原生js？
都不要
【等同于JQuery方法的原生JavaScript:Dom和表单】HTML5指出不同的input type，例如 emails, telephones, URLs, numbers, times, dates, colors和通过正则表达式的自定义表单，例如，如果你想要强制用户输入邮箱地址，可以使用：