为何JS中form.location可访问表单元素？原理及跨项目差异解析

问题背景 #

以下代码中，JavaScript通过document.querySelector("form").location.value获取单选按钮组的选中值，疑惑点在于：为何这种通过name属性访问的方式可行？之前尝试相同方法为何失败？以及为何能自动跟踪选中值的变化？

JavaScript代码 #

function getCityChoice() {
  const location = document.querySelector("form").location.value;
  console.log(location)
}

HTML核心代码片段 #

<form name="reserve" action="index.html" method="get" onsubmit="return validate(event);">
  <!-- 其他表单字段省略 -->
  <div class="formData">
    <input class="checkbox-input" type="radio" id="location1" name="location" value="New York" />
    <label class="checkbox-label" for="location1">
      <span class="checkbox-icon"></span>
      New York</label>
    <input
      class="checkbox-input"
      type="radio"
      id="location2"
      name="location"
      value="San Francisco"
    />
    <!-- 其他城市单选按钮省略 -->
  </div>
</form>

关键解析 #

1. 为何form.location能访问到对应控件？ #

这是浏览器对HTMLFormElement对象的原生实现特性：

• 页面加载时，浏览器会为每个<form>元素生成对应DOM对象。
• 表单内所有带name属性的控件（input、select等），会被自动挂载为该表单对象的属性，属性名完全匹配控件的name值。
• 对于name相同的单选按钮组，这个属性直接指向当前被选中的radio元素，无需手动遍历判断选中状态。

2. 之前尝试无效的常见原因 #

• 表单对象获取失败：如果代码执行时<form>还未加载完成（比如JS写在<head>里未监听DOM加载），document.querySelector("form")返回null，无法访问.location属性。
• name值不匹配：控件的name属性值和访问的属性名大小写/拼写不一致（比如name="Location"却用form.location访问）。
• 控件不在表单内：目标控件未嵌套在你获取的<form>标签内部，浏览器不会将外部控件挂载到该表单对象上。
• name值冲突：如果控件的name和表单对象原生属性名（如action、method）重复，会被原生属性覆盖，无法通过这种方式访问。

3. 为何能跟踪选中值的变化？ #

form.location是动态引用：每次用户切换单选按钮时，浏览器会自动更新这个属性的指向，让它始终指向当前被选中的radio元素。所以每次调用getCityChoice()时，.value都会直接拿到最新的选中值，无需额外添加事件监听同步数据。

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