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的action属性应该是反映HTML action属性的DOMString，而不是HTMLElement。

Internet Explorer和Chrome中都存在此行为，因此我认为这不是浏览器实现的错误。 HTML5 specification州：

action IDL属性必须反映同名的content属性，但在获取时，当缺少content属性或其值为空字符串时，必须返回文档的地址。

我在这里错过了什么吗？

Answer 1

使用getAttribute()

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

http://jsfiddle.net/qbgp7gne/

在您的示例中，它会发生，因为您的表单中有一个子元素，其中的属性name为＆＃39; action＆＃39;。 JS正在为您的表单返回一个HTMLCollection，.action是该节点的子节点。表格很特别。

重命名它以查看原始JS按预期工作：

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

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

Answer 2

以下是specification所说的内容：

getter (RadioNodeList or Element) (DOMString name);

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

直接检索属性：

form.getAttribute("action");

或重命名您的输入：

<input name="control-action">

HTMLFormElement的操作

2 个答案: