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

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

一、當(dāng)表單name唯一時(shí)

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

IE8下

IE9下

firefox下，版本63.0.1

chrome下，版本68.0.3340.75

safari下，版本11.1.2

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

二、當(dāng)表單name不唯一時(shí)

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

IE8下

IE8下，獲取獲取第二個(gè)表單

IE9下

IE9下，獲取第二個(gè)表單

firefox下

firefox下，獲取第二個(gè)表單

chrome下

chrome下，獲取第二個(gè)表單

safari下

safari下，獲取第一個(gè)表單

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

通過(guò)以上兼容性的測(cè)試，在不考慮IE8的情況下，推薦使用document.formName的形式獲取表單。
當(dāng)表單name唯一時(shí)，通過(guò)document.formName的方法可獲得該表單；
當(dāng)表單name不唯一時(shí)，通過(guò)document.formName的方法可以獲得一個(gè)HTMLCollection對(duì)象，通過(guò)HTMLCollection[i]的形式，可以獲得第i個(gè)表單。

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

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

<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

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

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

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

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

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

通過(guò)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

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

最新評(píng)論