让你一次了解document.forms和document.formName的兼容性

今天在代码中不小心写了两个name相同的form表单，然后通过document.forms[formName]形式获取到的只有第一个表单，然后深入学习了下document.forms[formName]和document.formName的区别和兼容性。

下面先测试了下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

测试发现：当表单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下，获取第一个表单

测试发现：当表单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相同的所有表单。

结论：

通过以上兼容性的测试，在不考虑IE8的情况下，推荐使用document.formName的形式获取表单。
当表单name唯一时，通过document.formName的方法可获得该表单；
当表单name不唯一时，通过document.formName的方法可以获得一个HTMLCollection对象，通过HTMLCollection[i]的形式，可以获得第i个表单。

document.formName.length结果是什么？

现在请思考下document.formName.length的结果是什么？是不是理所当然的想，当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

实践后发现，当表单name唯一时，length为2；当name不唯一(有两个)时，也返回2。为什么呢？

当name唯一时，documen.formName返回的不是一个数组，所以一开始想得是length属性不存在，document.formName.length应该返回undefined，但是事实却不是这样。

当name唯一时，document.formName.length返回的是表单下输入框的元素个数，而当name不唯一时，返回的才是真正的表单个数。

那么如何判断表单的name属性是否唯一呢？

一般写使用表单的话，下面一定会有输入框，无论name属性是否唯一，document.formName[0]都有值，但是当name唯一下，document.formName[0][0]是没有元素的，即结果为undefined，而当name不唯一时，document.formName[0][0]返回的是第一个表单下的第一个子元素

因此，可以通过document.formName[0][0]来判断表单的name属性是否唯一，当返回结果为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>

参考：

1. Is it OK to have multiple HTML forms with the same name?
2. Javascript document.forms value does not work for Internet Explorer