快捷導(dǎo)航

JavaScript中document.forms[0]與getElementByName區(qū)別

更新時間：2015年01月21日 15:06:38 投稿：hebedich

在很多情況下JavaScript中document.forms[0]與getElementByName這兩種用法沒有區(qū)別，這片文章詳細的解釋了兩者的區(qū)別和用法，有興趣的朋友可以參考一下。

首先我們來看個示例：

<form name="buyerForm" method="post" action="/mysport/control/user/list.do">

<input type="checkbox" id="usernames" value="testtest" >testtest<br>

<input type="checkbox" name="usernames" value="testtest" >testtest<br>

<input type="text" id="usernames" value="testtest" >testtest<br>

</form>

document.forms[0]在HTML頁面中有一個form表單或者多個form表單的時候，都是返回一個NodeList類型的form數(shù)組
document.forms[0].usernames,這里的usernames可以是id的值，也可以是name的值，在這里這兩個屬性是等價的。而且，不會區(qū)分組件是文本框，是單選框，還是復(fù)選框。

這時要區(qū)分兩種情況，

有一個input的id或者name為'usernames'的時候，document.forms[0].usernames返回的是具體的input組件，這時如果操作的話，就要按照具體的組件操作方法來使用。

此時，alert(document.forms[0].usernames.length)返回的是undefined,因為input組件沒有l(wèi)ength這個屬性。
有兩個或者兩個以上input的id或者name為'usernames'的時候，document.forms[0].usernames返回的是NodeList數(shù)組，此時，
alert(document.forms[0].usernames.length)會返回數(shù)組的長度，上邊的例子中，返回值是3
所以，當使用js進行全選的時候，要考慮同名復(fù)選框有一個和多個的情況

復(fù)制代碼代碼如下:

function allSelect(){

var form = document.forms[0];

var state = form.allselectbox.checked;

var length = form.usernames.length;//當有兩個或者兩個以上的復(fù)選框name為usernames的時候，返回的是數(shù)組的長度

//當有一個復(fù)選框name為usernames的時候，form.usernames返回的是復(fù)選框?qū)ο?，而不是?shù)組,所以其length屬性是undefined

if(length){ //在javascript中，只要被判斷的條件是0，null，或者undefined，均被認為是false，其他情況均認為是true

for(var i=0;i<length;i++){

form.usernames[i].checked=state;

}

}

else{

form.usernames.checked=state;

}

}

有一個組件id為'usernames'或者多個組件id為'usernames',document.getElementById('usernames')返回的值都是一個表單組件，當有多個組件id為'usernames',返回的是第一個id為'usernames'組件。
有一個組件name為'usernames'或者多個組件name為'usernames',document.getElementsByName()返回的都是HTMLCollection數(shù)組。注意與document.getElementsByTagName()的區(qū)別，后者是根據(jù)標簽類別獲取數(shù)組。
var names = document.getElementsByTagName("usernames"),alert(names[0])這里返回的結(jié)果是undefined,我原來把byName與byTagName弄混了，而沒有標簽是以usernames開始的，<usernames value=''></usernames>這是不存在的。
但是getElementsByTagName返回的依然是數(shù)組集合，其不含任何內(nèi)容，names[0]不存在，所以返回的是undefined，因為超出數(shù)組范圍的時候，彈出的都是undefined值。
var test = {'0','1','2',};alert(test[3]);返回的是undefined.

您可能感興趣的文章: