JS中選擇DOM元素的方法集錦

各類選取元素的方法的速度，用原生的方法比jQuery要快差很少8倍，IE8是最慢的，IE9的速度差很少是IE8的3倍，Chrome的表現最好，其次是Firefox

選取文檔元素的方法：

一、經過ID選取元素（getElementById）
   1）使用方法：document.getElementById("domId")
        其中，domId爲要選取元素的id屬性值
   2）兼容性：低於IE8版本的IE瀏覽器對getElementById方法的實現是不區分元素ID號的大小寫的，而且會返回匹配name屬性的元素。

二、經過名稱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屬性值匹配的元素也會一塊兒返回

三、經過標籤名選取元素（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屬性）

四、經過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方法

 

五、經過CSS選擇器選取元素

    1）使用方法：document.querySelector("selector")或者是element.querySelector("selector")

         其中selector爲合法的css選擇器

    2）說明：調用document.querySelector("selector")方法時，會在文檔元素的範圍內查找匹配的元素；

                調用element.querySelector("selector")方法時，只會在該元素後代元素的範圍內查找匹配的元素。

    3）兼容性：IE8及其如下版本不支持 六、經過CSS選擇器選取元素     1）使用方法：document.querySelectorAll("selector")         其中，selector爲合法的CSS選擇器     2）說明：a. 返回值是一個nodeList集合（區別於Array）     3）兼容性：IE8及其如下版本的瀏覽器只支持CSS2標準的選擇器語法