具有与表单属性相同的名称属性的表单元素，隐藏/覆盖本机表单属性。有解决方法吗？

Question

如果表单中的input 元素与表单的原生属性同名，则该元素将隐藏原生属性。

例如，考虑以下形式：

<form id = "test">
    <input name="tagName" type="text" />
    <input name="nodeName" type="text" />
</form>

form 元素的tagName 和nodeName 通常都返回FORM。但在这种情况下，下面的代码：

var f = document.getElementById("test");

console.log(f.tagName);
console.log(f.nodeName);
console.log(f["tagName"]);
console.log(f["nodeName"]);

显示：

<input name=​"tagName" type=​"text">​ 
<input name=​"nodeName" type=​"text">​
<input name=​"tagName" type=​"text">​
<input name=​"nodeName" type=​"text">​

是否有解决方法（重命名字段除外）？ getAttribute 适用于 name、action 或 method 等属性，但不适用于 nodeName 或 tagName 等属性。

Fiddle here.

更有趣的事情：在this fiddle 我只是在记录表单本身。通常这会显示 HTML，但现在 Chrome 只记录 TypeError。

Answer 1

我想不出直接在<form> 元素上执行此操作的方法。我能想到的最好的方法是创建一个没有任何后代的元素的克隆并检查克隆的属性：

var clonedForm = f.cloneNode(false);
console.log(clonedForm.nodeName);

更新

正如 cmets 中所指出的，这具有相同的问题，因为 cloneNode 可以像 nodeName 一样被覆盖。由于表单的任何属性都可以被覆盖，因此这是一个难以克服的问题。

Answer 2

编辑：我更了解您想要什么。每个form 元素都有一个名为elements 的属性：

var f = document.getElementById("test");
f.elements.tagName
f.elements.nodeName

编辑 2：如果您希望 f.tagName 在这种情况下返回 "FORM"，则不能。您已经覆盖了本机属性。如果您确实需要使用“tagName”作为名称，那么也许您可以使用括号或点符号：

HTML: <input type="text" name="element.tagName">
JS: f.elements["element.tagName"]

HTML: <input type="text" name="element[tagName]">
JS: f.elements["element[tagName]"]

编辑 3：一些浏览器有一个名为 localName 的 DOM 属性，只要您没有名称为“localName”的表单字段，它就可以工作。

基本上，不要使用原生 DOM 属性名称作为表单字段名称属性的值。