引:JavaScript中區別document.forms[0]與getElementByName
JavaScript中區別document.forms[0].usernames與document.getElementByName(usernames),在很多情況下這兩種用法沒有區別,這片文章詳細的解釋了兩者的區別和用法,有興趣的朋友可以參考一下。
1 |
< form
name = "buyerForm"
method = "post"
action = "/mysport/control/user/list.do" >
|
2 |
< input
type = "checkbox"
id = "usernames"
value = "testtest"
>testtest< br >
|
3 |
< input
type = "checkbox"
name = "usernames"
value = "testtest"
>testtest< br >
|
4 |
< input
type = "text"
id = "usernames"
value = "testtest"
>testtest< br >
|
5 |
</ form > |
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
1 |
for ( var
i=0;i<length;i++){ |
2 |
form.usernames[i].checked=state;
|
3 |
}
|
4 |
}
|
5 |
else {
|
6 |
form.usernames.checked=state;
|
7 |
}
|
8 |
} |
有一個組件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開始的,<usernames value=''></usernames>這是不存在的。
但是getElementsByTagName返回的依然是數組集合,其不含任何內容,names[0]不存在,所以返回的是undefined,因爲超出數組範圍的時候,彈出的都是undefined值。
var test = {'0','1','2',};alert(test[3]);返回的是undefined.