前些日子，碰到過一個比較麻煩的問題。想從?document.getElementsByTagName()方法的返回值中取出某個特定的元素。一開始以為它的返回值是一個數組，結果，大錯特錯。它返回的是一個?DOM?對象，可以遍歷，有?length?屬性，但不是數組。
證據在這里：
XML/HTML code ?

1 2 3 4 5 6 7 8

<script> ????window.onload?=?function()?{ ???????var?divs?=?document.getElementsByTagName("div"); ???????document.getElementById("info").innerHTML?=?!!(divs?instanceof?Array); ????} </script> <div></div> <div?id="info"></div>

把它當Array用的兄弟姐妹小心了。
既然不是Array，那么它到底是什么呢？
繼續探索之：
XML/HTML code ?

1 2 3 4 5 6 7 8

<script> ????window.onload?=?function()?{ ???????var?divs?=?document.getElementsByTagName("div"); ???????document.getElementById("info").innerHTML?=?Object.prototype.toString.call(divs); ????} </script> <div></div> <div?id="info"></div>

在各瀏覽器中打開：
IE：?[object?Object]
Firefox：[object?HTMLCollection]
Chrome/Safari?/Opera：[object?NodeList]
這個結果讓人很糾結，5?個瀏覽器3種結果，其中?IE?和Firefox貌似不太合群。
無奈，干脆去查查標準。

W3C?DOM3中?document.getElementsByTagName()?方法的返回值

getElementsByTagName()?是?W3C?從??DOM1就引進的獲取擁有相同標簽名稱的一組元素的方法。而在?DOM2?和??DOM3?保留了這個接口。
它的返回值是一個?NodeList。
一下是它的接口說明：
C/C++ code ?

1 2 3 4 5

interface?Element?:?Node?{ ???... ???NodeList?getElementsByTagName(in?DOMString?name); ???... }

DOM3中關于?getElementsByTagName接口的詳細說明，請看這里： getElementsByTagName

主流瀏覽器中?getElementsByTagName()方法的返回值

各瀏覽器官方文檔中對于此方法的說明也符合W3C的規定，都是返回的?NodeList類型的對象集合。
看來，Firefox跟自己矛盾了，哈哈。
關于資料，看這里
Mozilla?官方： document.getElementsByName
Safari官方?Webkit?DOM： getElementsByName
MSDN官方:? getElementsByName?Method
那么什么是NodeList接口呢，它又有什么特性呢，接著往下看。

NodeList?接口

W3C?DOM3規定，NodeList是一個有序的節點集合。

它的屬性和方法：
NodeList?.?length
???返回集合中的對象個數。length是只讀屬性。
Node?=?NodeList?.?item(index)
?????從集合中返回指定索引的節點。

可見，NodeList類型的對象可以使用?item()方法獲取其中的節點。
在?Firefox，Chrome和Safari中，對于NodeList的定義與?W3C相同。
在?IE中，NodeList繼承了Collection接口，所以，NodeList對象支持Collection接口中的方法。
Opera?沒有找到相關說明。
關于?NodeList的說明資料：
W3C?DOM3:? Interface?NodeList
Mozilla:? NodeList
Safari官方Webkit?DOM:? NodeList
MSDN?NodeList接口： NodeList?Class
下面開始介紹，如何

從?document.getElementsByTagName()方法的返回值中取值

匯總表：
[img=https://lh6.googleusercontent.com/_RMajOid94m4gGaf92o36i2wawsFPzrr3wNCHh3Zw6Avo6-eVAUTp-KtIoTA7SbzEIBkbaWIrdzP2-6zqlJla3fMOSzI0nW5lVhOMrBQ4EdziQag][/img]
注：
1.?紅色代表不支持，綠色代表支持。
2.?對于?NodeList[name]、NodeList(name)?和?NodeList.namedItem(name)這?3行，IE的支持情況跟其他支持該方式的瀏覽器之間也存在差異，當document,getElementsByTagName()的返回值中存在相同?name?的元素時，IE返回一組元素，而其他支持的瀏覽器只返回符合的第一個元素。

可見，在IE和Opera?中，getElementsByTagName()返回值更像一個 HTMLcollection；而在Firefox中，介于 HTMLcollection和?NodeList之間。

NodeList[index]和?NodeList[id]

代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script?type="text/javascript"> ???window.onload?=?function()?{ ???????var?spans?=?document.getElementsByTagName("span"); ???????var?span2?=?spans[1]; ???????var?span3?=?spans["span3"]; ???????document.getElementById("info").innerHTML?=?"<br/>NodeList[index].id?:?"?+?span2.id ???????????????????????????????????????????????????????????????????+?"<br/>NodeList[id].id?:?"?+?span3.id; ???} </script> <span?id="span1"></span> <span?id="span2"></span> <span?id="span3"></span> <div?id="info"></div>

測試結果在各瀏覽器中都相同：
NodeList[index].id?:?span2
NodeList[name].id?:?span3

NodeList[name]

測試代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12

<script?type="text/javascript"> ????window.onload?=?function()?{ ???????var?inputs?=?document.getElementsByTagName("input"); ???????var?input_1?=?inputs["input1"]; ???????document.getElementById("info").innerHTML?+=?"<br/>NodeList[name].id?:?"?+?input_1.id; ????} </script> <input?id="ipt1"?name="input1"> <input?id="ipt2"?name="input2"> <input?id="ipt3"?name="input3"> <div?id="info"></div>

結果：
Firefox、Opera和IE，都輸出的是：NodeList[name].id?:?ipt1
Chrome?和Safari報錯，它們不支持這種方式。

另外，Firefox和Opera中，此方法存在差異，因為?name?屬性可以相同，當存在多個相同?name?的元素時，Firefox和Opera中取出的還是第一個，而IE取出的則是一個組。
看代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13

<script?type="text/javascript"> ????window.onload?=?function()?{ ???????var?inputs?=?document.getElementsByTagName("input"); ???????var?input_1?=?inputs["input1"]; ???????document.getElementById("info").innerHTML?+=?"NodeList[name].id?:?"?+?input_1.id+ ???????????????"<br/>NodeList[name].length?:?"?+?input_1.length; ????} </script> <input?id="ipt1"?name="input1"> <input?id="ipt2"?name="input1"> <input?id="ipt3"?name="input3"> <div?id="info"></div>

在Firefox和Opera中輸出：
NodeList[name].id?:?ipt1
NodeList[name].length?:?undefined
IE?中：
NodeList[name].id?:?undefined
NodeList[name].length?:?2


NodeList(index)

測試用例代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script?type="text/javascript"> ???window.onload?=?function()?{ ???????var?spans?=?document.getElementsByTagName("span"); ???????try?{ ???????????var?span2?=?spans(1); ???????????document.getElementById("info").innerHTML?=?"NodeList(index).id:?"?+?span2.id; ???????}?catch(err)?{ ???????????document.getElementById("info").innerHTML?=?"NodeList(index)?:?"?+?err; ???????} ???} </script> <span?id="span1"></span> <span?id="span2"></span> <div?id="info"></div>

以上代碼，只有在Firefox中報錯：TypeError:?spans?is?not?a?function
其他瀏覽器中的輸出：NodeList(index).id:?span2


NodeList(id)

測試代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script?type="text/javascript"> ????window.onload?=?function()?{ ????????var?spans?=?document.getElementsByTagName("span"); ????????try?{ ????????????var?span2?=?spans("span2"); ????????????document.getElementById("info").innerHTML?=?"NodeList(id).id:?"?+?span2.id; ????????}?catch(err)?{ ????????????document.getElementById("info").innerHTML?=?"NodeList(id)?:?"?+?err; ????????} ????} </script> <span?id="span1"></span> <span?id="span2"></span> <div?id="info"></div>

Firefox、?Chrome和Safari報錯，IE?和?Opera?依然支持。

NodeList(name)

看測試用例代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13

<script?type="text/javascript"> ????window.onload?=?function()?{ ???????var?inputs?=?document.getElementsByTagName("input"); ???????var?input_1?=?inputs("input1"); ???????document.getElementById("info").innerHTML?+=?"NodeList(name).id?:?"?+?input_1.id+ ???????????????"<br/>NodeList(name).length?:?"?+?input_1.length; ????} </script> <input?id="ipt1"?name="input1"> <input?id="ipt2"?name="input1"> <input?id="ipt3"?name="input3"> <div?id="info"></div>

以上代碼，IE和Opera都支持。但是，支持情況也有差異，同?NodeList[name]。
Firefox和Webkit瀏覽器都不支持。

NodeList.item(index)

看測試用例代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script?type="text/javascript"> ????window.onload?=?function()?{ ????????var?spans?=?document.getElementsByTagName("span"); ????????try?{ ????????????var?span2?=?spans.item(1); ????????????document.getElementById("info").innerHTML?=?"NodeList.item(idx).id:?"?+?span2.id; ????????}?catch(err)?{ ????????????document.getElementById("info").innerHTML?=?"NodeList.item(idx)?:?"?+?err; ????????} ????} </script> <span?id="span1"></span> <span?id="span2"></span> <div?id="info"></div>

經過測試，各瀏覽器都支持這種方式。

NodeList.namedItem(id)

測試用例代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script?type="text/javascript"> ????window.onload?=?function()?{ ????????var?spans?=?document.getElementsByTagName("span"); ????????try?{ ????????????var?span2?=?spans.namedItem("span2"); ????????????document.getElementById("info").innerHTML?=?"NodeList.namedItem(name).id:?"?+?span2.id; ????????}?catch(err)?{ ????????????document.getElementById("info").innerHTML?=?"NodeList.namedItem(name)?:?"?+?err; ????????} ????} </script> <span?id="span1"></span> <span?id="span2"></span> <div?id="info"></div>

Chrome和Safari不支持此方法，報錯。
其他瀏覽器輸出：NodeList.namedItem(id).id:?span2

NodeList.namedItem(name)

測試用例代碼：
XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13

<script?type="text/javascript"> ????window.onload?=?function()?{ ???????var?inputs?=?document.getElementsByTagName("input"); ???????var?input_1?=?inputs.namedItem("input1"); ???????document.getElementById("info").innerHTML?+=?"inputs.namedItem(name).id?:?"?+?input_1.id+ ???????????????"<br/>inputs.namedItem(name).length?:?"?+?input_1.length; ????} </script> <input?id="ipt1"?name="input1"> <input?id="ipt2"?name="input1"> <input?id="ipt3"?name="input3"> <div?id="info"></div>

Chrome?和?Safari?不支持這個方法。
Firefox、?Opera和IE都支持，但存在差異，情況跟NodeList[name]相同。

使用document.getElementsByTagName()的誤差

在利用getElementsByTagName()方法取同一類對象時，瀏覽器插件生成的標簽也會被計算在內。例如，在document.getElementsByTagName("div")的返回值中，包括Firebug插件的div標簽。所以，如果利用index取值，可能會跟預想的結果不同。

總結

這個方法真不讓人省心啊，既然兼容性問題這么多，那么，應該怎樣避免此類問題的發生呢？其實，很簡單，用上面表里，所有瀏覽器都支持的方法就好。少用?index?取元素，不夠準確。另外，沒有特殊需求而僅僅為了獲取元素，請使用document.getElmentById()。
更多8

總結

以上是生活随笔為你收集整理的getElementsByTagName的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。