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的表单数量。以下通过实例进行验证：

<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唯一时，document.formName返回的并非数组，因此初步推测length属性不存在，document.formName.length应返回undefined，但实际结果并非如此。

当name唯一时，document.formName.length返回的是该表单下输入框（input元素）的数量；而当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兼容性分析的内容，请搜索本站以往文章或继续浏览下方相关文章，希望大家以后多多支持本站！