javascript - 为什么 innerHTML 不反射(reflect)在 html 表单中所做的更改？

Question

这是我的 html 文件的一部分:

<form id="foo">
   <select>
      <option value="1" selected>1</option>
      <option value="2">2</option>
   </select>
</form>

现在，当我使用以下 javascript 代码时，它会为我提供表单的确切内容:

alert(getElementById("foo").innerHTML);

但是，在我更改了表单的选项后，上面的代码仍然返回以前版本的表单内容。

例如，假设我已将选项从“1”切换为“2”。在这种情况下，我希望上面的 javascript 代码返回表单的内容，并选择了选项“2”；但无论我如何更改表单，它始终会返回表单内容的原始版本。

Answer 1

内容属性显示初始状态。

IDL 属性(又名属性)显示当前状态。

例如，假设我们有这样的文本输入:

<input value="foo" />

它的默认文本是“foo”。让我们把它改成“酒吧”。然后，

• input.getAttribute('value') 将是初始值:"foo"。
• input.defaultValue 将等同于上面的内容:"foo"。
• input.value 将是当前值:"bar。

var inp = document.querySelector('input');
(inp.oninput = function() {
  document.getElementById('attr').textContent = inp.getAttribute('value');
  document.getElementById('defVal').textContent = inp.defaultValue;
  document.getElementById('val').textContent = inp.value;
})();

<input value="foo" />
<p>Attribute: <span id="attr"></span></p>
<p>Default value: <span id="defVal"></span></p>
<p>Value: <span id="val"></span></p>

在你的情况下，它发生了类似的事情。 innerHTML 仅显示 HTML 标记，其中包括内容属性(反射(reflect)初始状态)但不包括 IDL 属性(当前状态)。

如果您想要当前状态，请使用 IDL 属性读取它，而不是使用 innerHTML。