摘自JavaScript權威指南（jQuery根據樣式選擇器查找元素的終極方式是先用getElementsByTagName(*)獲取所有DOM元素，然後根據樣式選擇器對所有DOM元素進行篩選）
今天試了下各種選取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表現最好，其次是Firefox）
選取文檔元素的方法：
1、通過ID選取元素（getElementById）
1）使用方法：document.getElementById("domId")
其中，domId為要選取元素的id屬性值
2）兼容性：低於IE8版本的IE瀏覽器對getElementById方法的實現是不區分元素ID號的大小寫的，並且會返回匹配name屬性的元素。
2、通過名稱name選取元素（getElementsByName）
1）使用方法：document.getElementsByName("domName")
其中，domName為要選取元素的name屬性值
2）說明：a. 返回值是一個nodeList集合（區別於Array）
b. 和ID屬性不一樣，name屬性只在少數DOM元素中有效（form表單、表單元素、iframe、img）。這是因為name屬性是為了方便提交表單數據而打造的。
c. 為form、img、iframe、applet、embed、object元素設置name屬性時，會自動在Document對像中創建以該name屬性值命名的屬性。所以可以通過document.domName引用相應的dom對象
3）兼容性：IE中ID屬性值匹配的元素也會一起返回
3、通過標籤名選取元素（getElementsByTagName）
1）使用方法：element.getElementsByTagName("tagName")
其中，element是有效的DOM元素（包括document）
tagName是DOM元素的標籤名
2）說明：a. 返回值是一個nodeList集合（區別於Array）
b. 該方法只能選取調用該方法的元素的後代元素。
c. tagName不區分大小寫
d. 當tagName為*時，表示選取所有元素（需遵從b.規則）
e. HTMLDocument會定義一些快捷屬性來訪問標籤節點。如：document的images、forms、links屬性指向<img>、<form>、<a>標籤元素集合，而document.body和document.head總是指向body和head標籤（當未顯示聲明head標籤時，瀏覽器也會創建document.head屬性）
4、通過CSS類選取元素（getElementsByClassName）
1）使用方法：element.getElementsByClassName("classNames")
其中，element是有效的DOM元素（包括document）
classNames是CSS類名稱的組合（多個類名之間用空格，可以是多個空格隔開），
如element.getElementsByClassName("class2 class1")將選取elements後代元素中同時應用了class1和class2樣式的元素（樣式名稱不區分先後順序）
2）說明：a. 返回值是一個nodeList集合（區別於Array）
b. 該方法只能選取調用該方法的元素的後代元素。
3）兼容性：IE8及其以下版本的瀏覽器未實現getElementsByClassName方法
5、通過CSS選擇器選取元素
1）使用方法：document.querySelectorAll("selector")
其中，selector為合法的CSS選擇器
2）說明：a. 返回值是一個nodeList集合（區別於Array）
3）兼容性：IE8及其以下版本的瀏覽器只支持CSS2標準的選擇器語法
以上這篇JS選取DOM元素的簡單方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。