DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS選取DOM元素的簡單方法
JS選取DOM元素的簡單方法
編輯:關於JavaScript     

摘自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元素的簡單方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved