在IE6還大行其道的時候，原生JS操作DOM有各種各樣的問題，jQuery應運而生，它解決了人們的痛點，對各種瀏覽器及其各種版本的兼容是相當的贊，而且易上手（不包括jQuery2.0），但他畢竟是庫，性能上面還是弱於原生的。如今許多公司已經放棄兼容IE6和7甚至8，所以原生JS操作DOM可以搬上台面了，尤其是原生在查找元素方面的擴展可以讓你不在依賴jQuery，下面詳說
原生查找元素最基本的三個
document.getElementById()接受一個參數：要取得的元素的ID，查找到則返回該元素，反之返回null。
document.getElementsByTagName()接受一個參數：要取得的元素標簽名。
document.getElementsByName()顧名思義返回帶有給定name特性的所有元素。
這三者中也有兼容性問題，針對本身有name屬性的HTML元素，document.getElementById()和document.getElementsByName()一樣在IE7及以下都可以取到，本身沒有的document.getElementById()則取不到。還有就是針對document.getElementsByName()各瀏覽器返回的都不同，IE返回HTMLCollection對象,Chrome和Firefox返回NodeList對象，這與JS高級程序設計的說法也是不同的。以上都是小問題啦，稍加注意就可以避免，但缺乏對元素class屬性的的DOM選擇才是最大的無助，做前端的都知道ID盡量都是留給后端開發用的，jQuery就可以，$(".class")多么的簡單。。。當然原生在選擇符上面也是在發展，首先Selectors API的制定，第一個版本有兩個核心方法：querySelector()和querySelectorAll()，IE8+、Firefox3.5+、Safari3.1+、Chrome和Opera10+都支持，可以通過Document和Element類型的實例進行調用。
querySelector()
該方法接受一個css選擇符，返回與該模式匹配的第一個元素，沒找到則返回null。
//獲取body元素
var body=document.querySelector("body"); //獲取有ID的元素
var myDiv=document.querySelector("#myDiv"); //獲取有class為choose的第一個元素
var choose=document.querySelector(".choose");
querySelectorAll()
該方法也接受一個css選擇符，只不過返回的是NodeList實例，沒找到NodeList就是空的。
//獲取em元素
var ems=document.querySelectorAll("em"); //獲取class為choose的所有元素
var choose=document.querySelectorAll(".choose");
上面的兩個選擇符API的出現彌補了不可對class操作的空白，但還不夠，HTML5新增了很多API，其中就有關於class的，簡化了對類的操作
getElementsByClassName()
該方法IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+都支持，可以通過document對象和所有的HTML元素調用，返回HTMLCollection，JS高程上說返回NodeList有失偏頗，具體參見我之前寫的一篇文章http://www.cnblogs.com/web-lexi/p/3907485.html
//獲取包含link和yellow的元素（是一個元素兩個class都要有才會取到，先后順序無所謂）
var allClass=document.getElementsByClassName("link yellow"); //獲取ID為myDiv中包含link的元素（獲取到的是myDiv元素的后代元素）
var links=document.getElementById("myDiv").getElementsByClassName("link");
classList
也是HTML5新增的操作類的方式，具有length屬性，通過它操作類方便簡單許多，支持Firefox3.6+、Chrome、IE10+
//刪除一個類
div.classList.remove("class"); //新增一個類
div.classList.add("class"); //切換一個類
div.classList.toggle("class"); //確定是否包含某個類
if(div.classList.contains("class")){ } //迭代類名
for(var i=0,len=div.classList.length; i<len;i++){ }
看到上面的代碼是不是感覺和jQuery好像，簡單明了，性能更佳，對不需要兼容老舊瀏覽器和開發移動端的以上都可以使用，省去了框架一身輕啊
最后祝大家春節快樂！