JavaScript中document.forms[0]與getElementByName區別_javascript技巧

首先我們來看個範例：

複製程式碼 程式碼如下:

testtest

testtest

testtest

document.forms[0]在HTML頁面中有一個form表單或多個form表單的時候，都是傳回一個NodeList類型的form數組
document.forms[0].usernames,這裡的usernames可以是id的值，也可以是name的值，在這裡這兩個屬性是等價的。而且，不會區分元件是文字框，是單選框，還是複選框。

這時要區分兩種情況，

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

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

複製程式碼 程式碼如下:

function allSelect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//當有兩個或兩個以上的複選框name為usernames的時候，回傳的是數組的長度
//當有一個複選框name為usernames的時候，form.usernames返回的是複選框對象，而不是數組,所以其length屬性是undefined
if(length){ //在javascript中，只要被判斷的條件是0，null，或undefined，都認為是false，其他情況皆認為是true
for(var i=0;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陣列。注意與document.getElementsByTagName()的區別，後者是根據標籤類別取得陣列。
var names = document.getElementsByTagName("usernames"),alert(names[0])這裡回傳的結果是undefined,我原來把byName與byTagName弄混了，而沒有標籤是以usernames開始的，這是不存在的。
但是getElementsByTagName回傳的依然是數組集合，不含任何內容，names[0]不存在，所以回傳的是undefined，因為超出數組範圍的時候，彈出的都是undefined值。
var test = {'0','1','2',};alert(test[3]);回傳的是undefined.