古詩詞大全網 - 個性簽名 - javascrip獲取某個元素有哪幾種方式

javascrip獲取某個元素有哪幾種方式

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標準的選擇器語法