JavaScript中form.all与直接访问表单元素的区别

form.all与直接访问的核心区别

在JavaScript中获取表单值时，既可以使用form.xx.value，也可以使用form.all.xx.value，这两者之间存在什么具体差异？

起初容易误以为加上all是获取form中所有名为xx的元素（若存在多个同名元素），并返回数组。但经查阅资料后发现，这种理解并不准确。

实际上，all代表form内的所有元素集合。这意味着form.all可以访问<form>标签包裹的任何元素，包括div、table等非表单标签；而form.xx仅能访问标准的表单元素，如input、select等。

代码示例与访问范围对比

具体测试情况如下：

 
<form>
<div id=div1><input name=text1 id=text1></div>
<input name=text2 id=text2>
</form>

通过form.xx只能访问text1和text2（针对表单元素，name和id属性均可通用）；而form.all.xx则可以访问text1、text2以及div1。

表单元素与非表单元素的访问规则

对于表单元素而言，name和id属性在访问时是通用的。例如上述代码中，form.text1与form.all.text1的效果等同。

对于非表单元素，只能通过form.all.xx（其中xx为id）的形式进行访问。此外，也可以省略form.all前缀，直接使用xx变量名进行访问。

需要注意的是，在访问表单元素时，如果存在多个同名元素，form.xx和form.all.xx返回的结果均为数组。

而对于非表单元素，若存在多个id相同的元素，form.all.xx仅代表第一个匹配的元素，其余同名元素将被忽略。