JS中選擇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.querySelector("selector")或者是element.querySelector("selector")
         其中selector為合法的css選擇器
    2)說明:調用document.querySelector("selector")方法時,會在文檔元素的范圍內查找匹配的元素;
                調用element.querySelector("selector")方法時,只會在該元素后代元素的范圍內查找匹配的元素。
    3)兼容性:IE8及其以下版本不支持

6、通過CSS選擇器選取元素
    1)使用方法:document.querySelectorAll("selector")
        其中,selector為合法的CSS選擇器
    2)說明:a. 返回值是一個nodeList集合(區別於Array)
    3)兼容性:IE8及其以下版本的瀏覽器只支持CSS2標准的選擇器語法
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM