Question

以下脚本让我感到惊讶。它产生以下结果：

InternetExplore

aaa：undefined bbb：undefined 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

在spec中定义了按名称或ID访问表单元素时使用的算法：

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



让候选人成为一个实时RadioNodeList对象，其中包含所有列出的元素，其表单所有者是具有form元素的id元素   name属性或input属性等于 name ，但有例外   type属性处于图像按钮状态的RadioNodeList个元素，   按树顺序。



如果候选人为空，请让候选人成为一个实时img对象，其中包含作为其后代的所有form个元素   id元素，具有name属性或form属性   等于 name ，按树顺序。



如果候选人为空，则 name 是form元素的过去名称映射中其中一个条目的名称：返回与之关联的对象   该地图中的名称。



如果候选人包含多个节点，请返回候选人并中止这些步骤。



否则，候选人只包含一个节点。将 name 中的映射添加到form.aaa元素的过去名称映射中的候选中的节点，   用相同的名称替换上一个条目，如果有的话。



在候选人中返回节点。

具体来说，问题是form.aaa; // RadioNodeList [ <input#bbb>, <input#aaa> ] form.aaa[0]; // <input#bbb> form.aaa[1]; // <input#aaa>有两个候选者，所以它会返回一个RadioNodeList集合（第4步）：

form.eee

对于$0.eee; // <input#eee>，只有一个候选者，因此返回（步骤6）：

{{1}}

Answer 2

DOM很奇怪......

但是querySelector会让你通过名字或ID来获取。它就像jQuery选择器。

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

它没有bt值的原因是因为form.aaa尝试匹配id或name并返回多个元素。试图获取其值会在IE中返回""或显然undefined

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

2 个答案: