JavaScript中获取表单名称最可靠的跨浏览器兼容方法

当表单内部存在name="name"的输入元素时，直接访问form.name会出现歧义——它可能是表单自身的名称字符串，也可能是该输入元素的DOM对象，示例代码如下：

<form id="myform" name="X">
    <input type="text" name="name" value="">
</form>

<script>
    let form = document.getElementById('myform');
    // form.name 可能是字符串"X"，也可能是上述input元素
</script>

需求是找到最可靠、跨浏览器兼容的方法，获取表单自身的名称（未设置则返回null）。目前测试的方案是判断typeof form.name === 'string'后使用，但不确定是否在所有浏览器生效。

最优解决方案：使用getAttribute('name') #

直接调用表单元素的getAttribute('name')方法是最稳妥的选择，它会直接读取表单DOM节点的name属性值，完全不受表单内部同名元素的干扰：

let form = document.getElementById('myform');
let formName = form.getAttribute('name');
// 未设置name属性时，formName为null；已设置则返回对应的字符串

这个方法符合DOM标准，所有主流浏览器（包括旧版IE、Safari等）均支持，彻底规避了form.name的歧义问题。

关于现有方案的兼容性说明 #

你当前的typeof form.name === 'string'方案在现代浏览器中可以正常工作，但在部分旧浏览器（如IE8及更早版本）中，如果表单内存在name="name"的元素，form.name会直接指向该元素（此时typeof form.name为object），导致误判表单未设置名称。因此该方案的兼容性不如getAttribute方法全面。

内容的提问来源于stack exchange，提问作者Karolis