快捷導(dǎo)航

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

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

在工作中, 我?？吹竭@樣一種獲取表單元素的方法:var eles = document.forms['表單名'].elements['元素名']; 如果對獲取到的結(jié)果進(jìn)行遍歷操作, 那么, 我要告訴你: 小心, eles.length的值可能為undefined.

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

二. 例子

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

 
<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)

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

 
<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

這個(gè)問題我之前已經(jīng)遇到過一次了，但是這次又忘記了，依然又犯錯(cuò)了，所以我必須要記錄一下。

看一下這個(gè)例子：

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

 
<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時(shí)，我一般都習(xí)慣這么做，但是這樣做往往就出現(xiàn)問題了，因?yàn)楹芏鄷r(shí)候我會(huì)去對比已選的checkbox和所有的 checkbox數(shù)量是否相等，但是只有一個(gè)的時(shí)候就會(huì)出錯(cuò)，因?yàn)樗祷氐木褪莄heckbox本身，并沒有l(wèi)ength這個(gè)屬性，所以我們需要先判斷所取到的input是否有l(wèi)ength屬性以便進(jìn)一步操作。

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

您可能感興趣的文章: