javascript - 为什么不像输入元素那样在克隆时选择和文本区域值更改得到更新？

Question

至少在 Firefox 中，当在动态或用户更改的文本区域或选择元素上使用 cloneNode(true) 时，value 属性不会保留(也不会保留DOM 改变以反射(reflect)动态变化)，而对于输入元素，对 value 属性的更改或用户对属性的更改会反射(reflect)在 DOM 中(因此它会在调用 cloneNode 时保留)。为什么会有这种区别？

更新:

1. 我想问的是:规范中是否规定了这种行为？ (或在错误报告中详细说明？)
2. 样本位于:http://jsfiddle.net/9RSNt/1/

Answer 1

我怀疑差异的出现是因为 textarea 和 select 的值由它们的节点内容决定。修改控件的值会修改它们的 DOM 属性，但不会修改它们的节点内容，因此当您克隆它们时，克隆具有原始元素的值。

您可以通过在更改事件上更新节点内容来解决此问题:

// textarea
$("textarea").change(function() { $(this).text($(this).val()); });

// select
$("select").change(function() {
    var sel = $(this).children(":selected");
    $(this.children).not(sel).removeAttr("selected");
    sel.attr("selected", "selected");
});

http://jsfiddle.net/emr2w/8/

编辑:

有许多关于此的 Mozilla 错误案例(有些已解决，有些未解决)，但对实际规范的提及很少且相距甚远。看起来 value 属性在 cloneNode() 之后的行为可能是规范中未明确定义的灰色区域。毕竟，cloneNode() 的目的是克隆一个 DOM 节点，而不一定是它的对象状态。

https://bugzilla.mozilla.org/show_bug.cgi?id=197294
https://bugzilla.mozilla.org/show_bug.cgi?id=230307
https://bugzilla.mozilla.org/show_bug.cgi?id=237783