输入与另一个输入的 ID 同名时的含义

Question

下面的脚本让我吃惊。它产生以下结果：

互联网探索

aaa: 未定义 bbb: 未定义 ccc: value3 ddd: value4 eee: value5

FireFox 和 Chrome

aaa: bbb: ccc: value3 ddd: value4 eee: value5

为什么当一个输入与另一个输入的名称具有相同的 ID（或相反）时，输入没有值？

function testResults(form) {
  alert([
    "aaa: " + form.aaa.value,
    "bbb: " + form.bbb.value,
    "ccc: " + form.ccc.value,
    "ddd: " + form.ddd.value,
    "eee: " + form.eee.value
  ].join(',    '));
}

<form>
  <input type="text" name="aaa" id="bbb" value="value1" />
  <input type="text" name="bbb" id="aaa" value="value2" />
  <input type="text" name="ccc" id="ccc" value="value3" />
  <input type="text" name="ddd" value="value4" />
  <input type="text" id="eee" value="value5" />
  <input type="submit" onclick="testResults(this.form)"/>
</form>

Answer 1

DOM 很奇怪……

但querySelector 会让你通过姓名或身份证获得。这就像 jQuery 选择器。

form.querySelector('[name=aaa]').value
form.querySelector('#aaa').value

顺便说一句，它没有值的原因是form.aaa 尝试通过id 或name 匹配并返回多个元素。试图获取返回 "" 的值，或者显然是 IE 中的 undefined

Answer 2

当您通过名称或 ID 访问表单元素时使用的算法在 spec 中定义：

当form 元素为命名属性检索编制索引时，用户 代理必须运行以下步骤：

1. 让 candidates 成为一个活动的 RadioNodeList 对象，其中包含表单所有者为 form 元素的所有列出的元素 id 属性或 name 属性等于 name，但有例外 的input 元素的type 属性处于图像按钮状态， 按树顺序排列。

2. 如果 candidates 为空，则让 candidates 为一个活动的 RadioNodeList 对象，其中包含所有 img 元素的后代元素 form 元素并且具有 id 属性或 name 属性 等于 name，按树顺序排列。

3. 如果 candidates 为空，name 是 form 元素的过去名称映射中的条目之一的名称：返回与 名字在那张地图上。

4. 如果 candidates 包含多个节点，则返回 candidates 并中止这些步骤。

5. 否则，candidates 只包含一个节点。在 form 元素的过去名称映射中添加从 name 到 candidates 中的节点的映射， 用相同的名称替换上一个条目（如果有）。

6. 返回候选中的节点。

具体来说，问题是form.aaa有两个候选，所以它返回一个RadioNodeList集合（步骤4）：

form.aaa; // RadioNodeList [ <input#bbb>, <input#aaa> ]
form.aaa[0]; // <input#bbb>
form.aaa[1]; // <input#aaa>

对于form.eee，只有一个候选者，因此将其返回（第 6 步）：

$0.eee; // <input#eee>