2 种类型的文本区域值

Question

HTML <textarea/>元素同时包含2个"value"字段；在查看元素的 html 源时，只有其中一个可见。（如下例所示）。

有人可以解释为什么会这样吗？"Type2" 值存储在哪里？

理论：What is the difference between properties and attributes in HTML?

var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.setAttribute('value', "Type1");
dummy.value = "Type2";

console.log("attributeValue is " + dummy.getAttribute('value'));
console.log(".value is " + dummy.value);

Answer 1

您的 setAttribute() 调用将 value 属性应用于 DOM 中的 textarea 元素。这在技术上是不正确的，因为 textarea 元素没有 value 属性。

然后设置元素的 value 属性。这是正确的用法，也是在元素中设置可见文本的原因。

这个逻辑的结果是这个HTML:

<textarea value="Type1">Type2</textarea>

当您使用 getAttribute() 时，您从 returns [=19= 的元素读取（非标准）value 属性 ].

当您阅读 value 属性时，您正在（正确地）阅读字段的用户可编辑内容中包含的值，returns Type2.

简而言之，您的困惑是因为您正在使用名为 value 和 属性[=43 的属性 =] 命名为 value，当应用于 textarea.

时，它们不是一回事

2 种类型的文本区域值

2 types of textarea values

html

javascript

textarea