document.getElementsByTagName()方法的返回值
document.getelementsbytagname()方法的返回值
/*
document.getelementsbytagname()方法的返回值中取出某個特定的元素。一開始以為它的返回值是一個數(shù)組，結(jié)果，大錯特錯。它返回的是一個 dom 對象，可以遍歷，有 length 屬性，但不是數(shù)組。
證據(jù)在這里：
html code<script>
??? window.onload = function() {
?????? var divs = document.getelementsbytagname("div");
?????? document.getelementbyid("info").innerhtml = !!(divs instanceof array);
??? }
</script>
<div></div>
<div id="info"></div>
把它當(dāng)array用的兄弟姐妹小心了。
既然不是array，那么它到底是什么呢？
繼續(xù)探索之：
html code<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]
這個結(jié)果讓人很糾結(jié)，5 個瀏覽器3種結(jié)果，其中 ie 和firefox貌似不太合群。
無奈，干脆去查查標(biāo)準(zhǔn)。
w3c dom3中 document.getelementsbytagname() 方法的返回值
getelementsbytagname() 是 w3c 從 dom1就引進的獲取擁有相同標(biāo)簽名稱的一組元素的方法。而在 dom2 和 dom3 保留了這個接口。
它的返回值是一個 nodelist。
一下是它的接口說明：
c/c++ codeinterface element : node {
?? ...
?? nodelist getelementsbytagname(in domstring name);
?? ...
}
dom3中關(guān)于 getelementsbytagname接口的詳細(xì)說明，請看這里：getelementsbytagname
主流瀏覽器中 getelementsbytagname()方法的返回值
各瀏覽器官方文檔中對于此方法的說明也符合w3c的規(guī)定，都是返回的 nodelist類型的對象集合。
看來，firefox跟自己矛盾了，哈哈。
關(guān)于資料，看這里
mozilla 官方：document.getelementsbyname
safari官方 webkit dom：getelementsbyname
msdn官方: getelementsbyname method
那么什么是nodelist接口呢，它又有什么特性呢，接著往下看。
nodelist 接口
w3c dom3規(guī)定，nodelist是一個有序的節(jié)點集合。
它的屬性和方法：
nodelist . length
返回集合中的對象個數(shù)。length是只讀屬性。
node = nodelist . item(index)
從集合中返回指定索引的節(jié)點。
可見，nodelist類型的對象可以使用 item()方法獲取其中的節(jié)點。
在 firefox，chrome和safari中，對于nodelist的定義與 w3c相同。
在 ie中，nodelist繼承了collection接口，所以，nodelist對象支持collection接口中的方法。
opera 沒有找到相關(guān)說明。
關(guān)于 nodelist的說明資料：
w3c dom3: interface nodelist
mozilla: nodelist
safari官方webkit dom: nodelist
msdn nodelist接口：nodelist class
下面開始介紹，如何
從 document.getelementsbytagname()方法的返回值中取值
匯總表：
注：
1. 紅色代表不支持，綠色代表支持。
2. 對于 nodelist[name]、nodelist(name) 和 nodelist.nameditem(name)這 3行，ie的支持情況跟其他支持該方式的瀏覽器之間也存在差異，當(dāng)document,getelementsbytagname()的返回值中存在相同 name 的元素時，ie返回一組元素，而其他支持的瀏覽器只返回符合的第一個元素。
可見，在ie和opera 中，getelementsbytagname()返回值更像一個htmlcollection；而在firefox中，介于htmlcollection和 nodelist之間。
nodelist[index]和 nodelist[id]
代碼：
html code<script type="text/網(wǎng)頁特效">
?? 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>
測試結(jié)果在各瀏覽器中都相同：
nodelist[index].id : span2
nodelist[name].id : span3
nodelist[name]
測試代碼：
html code<script type="text/網(wǎng)頁特效">
??? 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>
結(jié)果：
firefox、opera和ie，都輸出的是：nodelist[name].id : ipt1
chrome 和safari報錯，它們不支持這種方式。
另外，firefox和opera中，此方法存在差異，因為 name 屬性可以相同，當(dāng)存在多個相同 name 的元素時，firefox和opera中取出的還是第一個，而ie取出的則是一個組。
看代碼：
html code<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)
測試用例代碼：
html code<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)
測試代碼：
html code<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)
看測試用例代碼：
html code<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+
??? }
</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)
看測試用例代碼：
html code<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>
經(jīng)過測試，各瀏覽器都支持這種方式。
nodelist.nameditem(id)
測試用例代碼：
html code<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)
測試用例代碼：
html code<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()方法取同一類對象時，瀏覽器插件生成的標(biāo)簽也會被計算在內(nèi)。例如，在document.getelementsbytagname("div")的返回值中，包括firebug插件的div標(biāo)簽。所以，如果利用index取值，可能會跟預(yù)想的結(jié)果不同。
總結(jié)
這個方法真不讓人省心啊，既然兼容性問題這么多，那么，應(yīng)該怎樣避免此類問題的發(fā)生呢？其實，很簡單，用上面表里，所有瀏覽器都支持的方法就好。少用 index 取元素，不夠準(zhǔn)確。另外，沒有特殊需求而僅僅為了獲取元素，請使用document.getelmentbyid()。
總結(jié)
以上是生活随笔為你收集整理的document.getElementsByTagName()方法的返回值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript修改css中styl
- 下一篇： HTML DOM getElements