调试表单时发现HTMLFormElement的id属性返回HTMLInputElement对象

这情况我之前调试表单时也踩过坑！核心原因是浏览器的历史遗留特性导致的命名冲突：

当你的<form>内部存在一个name或id属性值为id的表单控件（比如你这里的<input name="id">），浏览器会自动把这个控件实例挂载到表单对象的同名属性上，直接覆盖了表单元素原本的id属性（也就是表单自身的ID字符串）。

具体细节解释 #

浏览器为了早期开发者方便快速访问表单内的控件，做了一个“便捷映射”：只要表单内的控件有name或id，就会成为表单对象的可直接访问属性。比如：

<form id="user-form">
  <input type="text" name="id" value="547" />
</form>
<script>
  const form = document.querySelector('#user-form');
  console.log(form.id); // 输出的不是字符串"user-form"，而是那个<input>元素！
</script>

你看到的element.constructor是HTMLFormElement完全正常，因为element本身确实是表单实例；而element.id.constructor是HTMLInputElement，是因为这个属性已经被内部的输入框给“抢占”了。

验证与解决办法 #

1. 验证这个现象：
   用getAttribute方法获取表单自身的ID，这个方法不会被覆盖：

   console.log(element.getAttribute('id')); // 这才是表单真正的ID字符串
   

   或者用hasOwnProperty判断属性归属：

   console.log(element.hasOwnProperty('id')); // 会返回false，因为"id"不是表单自身的属性，是浏览器挂载的控件引用
   

2. 解决方式：

   • 最彻底的：修改内部控件的name或id，避免使用id、name、action这类表单原生属性名当控件标识；
   • 临时兼容：如果不能改控件名称，就用getAttribute('id')获取表单自身ID，用element.querySelector('[name="id"]')来获取那个输入框控件，避免混淆。

内容的提问来源于stack exchange，提问作者mr.freeman13