一文让您了解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>

参考：

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兼容性分析内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！