HTML5 + JavaScript（.removeAttribute（'value'）也会删除.defaultValue？为什么？）

Question

所以我遇到了这个奇怪的事情，创建了一个清除表单的例程（不重置它，但清除它）。我不确定为什么.defaultProperty与值属性“硬链接”，但它绝对看起来是。

运行此示例（在IE以外的任何浏览器中）：

var myText1 = document.getElementById('Text1');
alert('original\ndef = ' + myText1.defaultValue + '\n val = ' + myText1.value);
myText1.value = null;
alert('.value=null\ndef = ' + myText1.defaultValue + '\n val = ' + myText1.value);

var myText2 = document.getElementById('Text2');
alert('original\ndef = ' + myText2.defaultValue + '\n val = ' + myText2.value);
myText2.removeAttribute('value');
alert('.removeAttribute(\'value\')\ndef = ' + myText2.defaultValue + '\n val = ' + myText2.value);

var myRange1 = document.getElementById('Range1');
myRange1.defaultValue = myRange1.value;
alert('original\ndef = ' + myRange1.defaultValue + '\n val = ' + myRange1.value);
myRange1.removeAttribute('value');
alert('.removeAttribute(\'value\')\ndef = ' + myRange1.defaultValue + '\n val = ' + myRange1.value);

<form id="frmForm">
  <table>
    <tr>
      <td>Text1</td>
      <td>
        <input id="Text1" type="text" value="1" />
      </td>
    </tr>
    <tr>
      <td>Text2</td>
      <td>
        <input id="Text2" type="text" value="2" />
      </td>
    </tr>
    <tr>
      <td>Range1</td>
      <td>
        <input id="Range1" type="range" min="0" max="10" style="width:155px;" />
      </td>
    </tr>
  </table>
</form>

请注意，Test1根据它的value属性得到一个defaultValue，只需将value属性设置为null就会保留defaultValue属性。

但对于Text2，使用.removeAttribute('value')，并且值和默认值都会更改。

现在，对于某些表单元素（如type =“range”），如果未指定value属性，则会自动设置value属性。在这种情况下，它会自动设置为min和max之间的中间点，在这种情况下为5.请注意，这不会以任何方式设置defaultValue属性，因此我手动设置它。但是当使用.removeAttribute('value')时，现在只会更改defaultValue属性...很可能是因为范围的值正在自动设置回5。

这些类型的不一致需要特殊处理，如果你不知道它们是否有点麻烦，就像我一样......

在我看来，value属性，value属性和defaultValue属性应该在初始化后被视为单独的实体，并且除非开发人员特别实现，否则不应更改另一个实体。

任何人都可以告诉我为什么这些以这种方式实施的原因？似乎这是一个疏忽，真的应该纠正。