表单元素的name属性与form-property相同,shadow /覆盖本机form-property.有解决方法吗？

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.

小提琴这里.

更有趣的是:在这个小提琴中,我只是简单地记录表单本身.通常会显示HTML,但现在Chrome只会记录TypeError.

Answer 1

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

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

更新

正如评论中指出的那样，这具有相同的问题，因为cloneNode可以以与nodeName. 由于表单的任何属性都可以被覆盖，这使得它成为一个难以克服的问题。