为什么innerHTML不反映在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属性(aka属性)显示当前状态.

例如,假设我们有一个像这样的文本输入:

<input value="foo" />

它的默认文本是"foo".我们将它改为"bar".然后,

• 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标记,其中包括内容属性(反映初始状态)但不包括IDL属性(当前状态).

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