JS獲取網頁中HTML元素的幾種方法分析

getelementbyid getelementsbyname getelementsbytagname 大概介紹

getelementbyid ，getelementsbyname ，getelementsbytagname

後兩個是得到集合，byid只是得到單個物件

getelementbyid 的用法

舉個例子：

網頁陶吧

同一頁面內的引用方法:

1、使用id：

link1.href，返回值為http://homepage.yesky.com

2、使用name：

document.all.link1.href，返回值為http://homepage.yesky.com

3、使用sourseindex：

document.all(4).href //注意，前面還有html、head、title和body，所以是4

document.anchors(0).href

其實方法3和方法4是一樣使用的集合，只是乙個是all，可以包括頁面所有標記，而anchors只包括鏈結。

5、getelementbyid：

document.getelementbyid("link1").href

6、getelementsbyname：

document.getelementsbyname("link1")[0].href //這也是乙個集合，是所有name等於該方法所帶引數的標記的集合

7、getelementsbytagname：

document.getelementsbytagname("a")[0].href //這也是乙個集合，是所有標記名稱等於該方法所帶引數的標記的集合

8、tags集合：

document.all.tags("a")[0].href

//與方法7一樣是按標記名稱取得乙個集合

除此之外：

event.screlement可以獲得觸發時間的標記的引用;

document.elementfrompoint(x,y)可以獲得x和y座標處的元素的引用;

document.body.componentfrompoint(event.clientx,event.clienty)可以獲得滑鼠所在處元素的引用;

還可以通過元素的父子節點和兄弟節點關係來引用，如nextsibling(當前節點的後一節點)、previoussibling(當前節點的前一節點)、childnodes、children、firstchild、lastchild、parentelement等都是父子節點和兄弟節點的一些引用;還不僅限於此。

上面是同一頁面內的常見引用方法，另外還涉及到不同頁面中的

getelementsbyname返回的是所有name為指定值的所有元素的集合

「根據 name 標籤屬性的值獲取物件的集合。」

集合比陣列要鬆散的多, 集合裡每個子項的型別可以不同, 集合只是把某些元素放在一起作為一類來使用, 相比之下陣列就嚴格多了, 每個子項都是統一的型別. document.getelementsbyname, document.getelementsbytagname, document.formname.elements 這類方法所得到的結果都是集合.

例：document.getelementsbyname()這個方法.它對乙個和多個的處理是一樣的,我們可以用：

當temp只有1個的時候,那麼就是temp[0],有多個的時候,用下標法temp[i]迴圈獲取

也有例外:

在ie 中getelementsbyname(「test「)的時候返回的是id=test的object陣列，而firefox則返回的是name= test的object的陣列。

按照w3c的規範應該是返回的是name= test的object的陣列。

firefox和ie中的getelementbyid相同:獲取對 id 標籤屬性為指定值的第乙個物件的引用。

注意getelementsbyname 有s在裡面

document.getelementbyid()可以控制某個id的tag

document.getelementsbyname()，返回的是乙個具有相同 name 屬性的元素的集合，而不是某個，注意有「s」。

而 document.getelementsbytagname() 返回的是一組相同 tag 的元素集合。

同乙個name可以有多個element，所以用document.getelementsbyname("thename")

他return 乙個collection，引用的時候要指名index

var test = document.getelementsbyname('testbutton')[0];

id那個，是唯一的

還應該注意:對類似沒有name屬性，對它name屬性為偽屬性document.getelementsbyname() 會失效，當然td可以設定id屬性，然後用 document.getelementsbyid("dde_noday"); 呼叫

JS獲取網頁中HTML元素的幾種方法分析

JS 獲取網頁中HTML元素的幾種分析方法

JS獲取網頁中HTML元素的幾種方法分析

JS獲取網頁中HTML元素的幾種方法分析

相關推薦