HTMLFormElement的作用

Question

下面是一个HTML片段来重现这个问题：

<form id=foo action='https://[::1]/'>
    <input type=hidden name=action value=xyz>
</form>

<script>
    window.alert(document.getElementById('foo').action);
</script>

起初，我使用的是jQuery .prop()，所以我认为这是问题所在，但它也发生在纯JavaScript中。

我希望结果是https://[::1]/，但出于某种原因，它给了我[HTMLInputElement]。根据MDN，HTMLFormElement的HTMLFormElement属性应该是反映HTMLaction属性的DOMString，而不是HTMLElement。

这种行为在Internet和Chrome中都存在，所以我不认为它是浏览器实现中的一个bug。HTML5规范指出：

action IDL属性必须反映同名的内容属性，除非在获取时，当内容属性丢失或其值为空字符串时，必须返回文档的地址。

我是不是漏掉了什么？

Answer 1

规格说明是这么说的：

getter (RadioNodeList or Element) (DOMString name);

这意味着表单具有按名称引用每个输入元素的属性：<input name="user">将自动定义form.user。在您的示例中，<input name="action">会导致form.action被重写，引用该元素而不是表单操作属性。

只需直接检索属性：

form.getAttribute("action");

或者重命名您的输入：

<input name="control-action">

Answer 2

使用getAttribute()

alert(document.getElementById('foo').getAttribute('action'));

http://jsfiddle.net/qbgp7gne/

在您的示例中，之所以会出现这种情况，是因为您的表单中有一个具有'action‘属性name的子元素。JS正在为您的表单返回一个HTMLCollection，而.action是该表单的子节点。表格是特别的。

将其重命名为看到原来的JS按预期工作：

<form id=foo action='https://[::1]/'>
    <input type=hidden name=definitelyNOTaction value=xyz>
</form>

http://jsfiddle.net/qbgp7gne/1/