快捷導(dǎo)航

JavaScipt選取文檔元素的方法(推薦)

更新時(shí)間：2016年08月05日 11:27:29 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JavaScipt選取文檔元素的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

摘自JavaScript權(quán)威指南（jQuery根據(jù)樣式選擇器查找元素的終極方式是先用getElementsByTagName(*)獲取所有DOM元素，然后根據(jù)樣式選擇器對(duì)所有DOM元素進(jìn)行篩選）

選取文檔元素的方法：

1、通過(guò)ID選取元素（getElementById）

1）使用方法：document.getElementById("domId")
其中，domId為要選取元素的id屬性值

2）兼容性：低于IE8版本的IE瀏覽器對(duì)getElementById方法的實(shí)現(xiàn)是不區(qū)分元素ID號(hào)的大小寫(xiě)的，并且會(huì)返回匹配name屬性的元素。

2、通過(guò)名稱(chēng)name選取元素（getElementsByName）

1）使用方法：document.getElementsByName("domName")
其中，domName為要選取元素的name屬性值

2）說(shuō)明：

a. 返回值是一個(gè)nodeList集合（區(qū)別于Array）

b. 和ID屬性不一樣，name屬性只在少數(shù)DOM元素中有效（form表單、表單元素、iframe、img）。這是因?yàn)閚ame屬性是為了方便提交表單數(shù)據(jù)而打造的。

c. 為form、img、iframe、applet、embed、object元素設(shè)置name屬性時(shí)，會(huì)自動(dòng)在Document對(duì)象中創(chuàng)建以該name屬性值命名的屬性。所以可以通過(guò)document.domName引用相應(yīng)的dom對(duì)象

3）兼容性：IE中ID屬性值匹配的元素也會(huì)一起返回

3、通過(guò)標(biāo)簽名選取元素（getElementsByTagName）

1）使用方法：document.getElementsByTagName("tagName")

其中，element是有效的DOM元素（包括document）
tagName是DOM元素的標(biāo)簽名

如：var aInput = document.getElementsByTagName("input");

　　　　　var aName = aInput[0];

　　　　　var pwd = aInput[1];

　　　　 var cfm = aInput[2];

2）說(shuō)明：a. 返回值是一個(gè)nodeList集合（區(qū)別于Array）

b. 該方法只能選取調(diào)用該方法的元素的后代元素。

c. tagName不區(qū)分大小寫(xiě)

d. 當(dāng)tagName為*時(shí)，表示選取所有元素（需遵從b.規(guī)則）

e. HTMLDocument會(huì)定義一些快捷屬性來(lái)訪問(wèn)標(biāo)簽節(jié)點(diǎn)。如：document的images、forms、links屬性指向<img>、<form>、<a>標(biāo)簽元素集合，而document.body和document.head總是指向body和head標(biāo)簽（當(dāng)未顯示聲明head標(biāo)簽時(shí)，瀏覽器也會(huì)創(chuàng)建document.head屬性）

4、通過(guò)CSS類(lèi)選取元素（getElementsByClassName）

1）使用方法：element.getElementsByClassName("classNames")

其中，element是有效的DOM元素（包括document）

classNames是CSS類(lèi)名稱(chēng)的組合（多個(gè)類(lèi)名之間用空格，可以是多個(gè)空格隔開(kāi)），

如element.getElementsByClassName("class2 class1")將選取elements后代元素中同時(shí)應(yīng)用了class1和class2樣式的元素（樣式名稱(chēng)不區(qū)分先后順序）

2）說(shuō)明：

a. 返回值是一個(gè)nodeList集合（區(qū)別于Array）

b. 該方法只能選取調(diào)用該方法的元素的后代元素。

3）兼容性：IE8及其以下版本的瀏覽器未實(shí)現(xiàn)getElementsByClassName方法

5、通過(guò)CSS選擇器選取元素

1）使用方法：document.querySelectorAll("selector")

其中，selector為合法的CSS選擇器