今天在代碼中不小心寫了兩個name相同的form表單，然后通過document.forms[formName]形式獲取到的只有第一個表單，然后深入學習了下document.forms[formName]和document.formName的區(qū)別和兼容性。

下面先測試了下document.forms[formName]、document.forms.formName、document.formName、document.forms(formName)的兼容性

一、當表單name唯一時

<form action="test1" name="test">test1</form>

IE8下

IE9下

firefox下，版本63.0.1

chrome下，版本68.0.3340.75

safari下，版本11.1.2

測試發(fā)現(xiàn)：當表單name唯一時，在IE8版本，獲取表單的所有方法得到的是一個object對象，通過這個object無法獲取表單，而在firefox、chrome和safari下，不支持document.forms(formName)的形式獲取表單

二、當表單name不唯一時

<form action="test1" name="test">test1</form>
<form action="test2" name="test">test2</form>

IE8下

IE8下，獲取獲取第二個表單

IE9下

IE9下，獲取第二個表單

firefox下

firefox下，獲取第二個表單

chrome下

chrome下，獲取第二個表單

safari下

safari下，獲取第一個表單

測試發(fā)現(xiàn)：當表單name不唯一時，IE9下四種方式都返回了一個HTMLCollection對象，通過HTMLCollection[1]的形式可以獲取到第二個表單；在firefox、chrome和safari下，通過document.forms[formName]和document.forms.formName獲取到的都是第一個表單，而不是一個HTMLCollection對象，也就是說，通過這兩種方法是無法獲取到第i(i>1)個表單元素到；在document.formName方法則無論是在IE9、firefox、chrome還是safari下，都能獲取一個HTMLCollection對象，也就是說，可以通過這種方法，獲取到name相同的所有表單。 結(jié)論：

通過以上兼容性的測試，在不考慮IE8的情況下，推薦使用document.formName的形式獲取表單。
當表單name唯一時，通過document.formName的方法可獲得該表單；
當表單name不唯一時，通過document.formName的方法可以獲得一個HTMLCollection對象，通過HTMLCollection[i]的形式，可以獲得第i個表單。

document.formName.length結(jié)果是什么？

現(xiàn)在請思考下document.formName.length的結(jié)果是什么？是不是理所當然的想，當name唯一時，返回1；當name不唯一時，有多少個name=formName的表單就返回幾。
我們還是用實例說話吧：

<form name="test1">
	<input type="text" name="age" />
	<input type="text" />
	<div>表單name唯一</div>
</form>
<form name="test2">
	<input type="text" name="age" />
	<input type="text" />
	<div>表單name不唯一</div>
</form>
<form name="test2">
	<input type="text" name="age" />
</form>

document.test1.length // -->2
document.test2.length // -->2

實踐后發(fā)現(xiàn)，當表單name唯一時，length為2；當name不唯一(有兩個)時，也返回2。為什么呢？

當name唯一時，documen.formName返回的不是一個數(shù)組，所以一開始想得是length屬性不存在，document.formName.length應該返回undefined，但是事實卻不是這樣。

當name唯一時，document.formName.length返回的是表單下輸入框的元素個數(shù)，而當name不唯一時，返回的才是真正的表單個數(shù)。 那么如何判斷表單的name屬性是否唯一呢？

一般寫使用表單的話，下面一定會有輸入框，無論name屬性是否唯一，document.formName[0]都有值，但是當name唯一下，document.formName[0][0]是沒有元素的，即結(jié)果為undefined，而當name不唯一時，document.formName[0][0]返回的是第一個表單下的第一個子元素

因此，可以通過document.formName[0][0]來判斷表單的name屬性是否唯一，當返回結(jié)果為undefined時，則表示name屬性唯一，否則即存在多個name相同當表單 延伸：

通過document.formName.elements[subName]或document.formName.subName的形式可以獲取form下元素。

如：

<form name="test">
	<input type="text" name="myName" value="happy" />
</form>

<script>
	document.test.myName.value  // happy
</script>

參考：

Is it OK to have multiple HTML forms with the same name?

Javascript document.forms value does not work for Internet Explorer

到此這篇關于一文讓您了解document.forms和document.formName的兼容性分析的文章就介紹到這了,更多相關document.forms兼容性分析內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論