javascript下一種表單元素獲取方法存在的問題

更新時間：2010年01月25日 21:51:24 作者：

在工作中, 我常看到這樣一種獲取表單元素的方法:var eles = document.forms['表單名'].elements['元素名']; 如果對獲取到的結果進行遍歷操作, 那么, 我要告訴你: 小心, eles.length的值可能為undefined.

一. 測試環(huán)境
瀏覽器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3

二. 例子

復制代碼代碼如下:

 
<form name="test-form" action="" method=""> 
<input type="checkbox" name="kk"> 
<form> 
<script type="text/javascript"> 
var oForm = document.forms['test-form'], 
eles = oForm.elements['kk']; 
alert(eles.length); // undefined 
alert(eles.nodeType); // 1 
</script> 

三. 解決方法(我想到的方法是改變獲取方式, 基于YUI)

復制代碼代碼如下:

 
<script type="text/javascript"> 
var oForm = document.forms['test-form'], 
eles = YAHOO.util.Dom.getElementsBy(function(el) { 
return el.type === 'checkbox' && el.name === 'kk'; 
}, 'input', oForm); 
alert(eles.length); // 1 
</script> 

document.formname.inputname

這個問題我之前已經遇到過一次了，但是這次又忘記了，依然又犯錯了，所以我必須要記錄一下。

看一下這個例子：

復制代碼代碼如下:

 
<form name="hehe"> 
<input type="checkbox" name="haha" /> 
</form> 
<form name="hehe2"> 
<input type="checkbox" name="haha" /> 
<input type="checkbox" name="haha" /> 
</form> 
<script type="text/javascript"> 
document.write(document.hehe.haha.length); 
document.write('<br />'); 
document.write(document.hehe2.haha.length); 
</script> 

演示

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

在獲取表單的input時，我一般都習慣這么做，但是這樣做往往就出現(xiàn)問題了，因為很多時候我會去對比已選的checkbox和所有的 checkbox數(shù)量是否相等，但是只有一個的時候就會出錯，因為它返回的就是checkbox本身，并沒有l(wèi)ength這個屬性，所以我們需要先判斷所取到的input是否有l(wèi)ength屬性以便進一步操作。

另外記錄下location.reload()，它還有一個可選參數(shù)，true或者false，如果省略或者設置為false，它就會用HTTP頭 If-Modified-Since來檢測服務器上的文檔是否已改變。如果文檔已改變，reload()會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。如果設置為true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務器上重新下載該文檔。就是傳說中的強制刷新。

您可能感興趣的文章: