2种textarea值[重复]

Posted 2023-02-21

【中文标题】2种textarea值[重复]

【英文标题】：2 types of textarea values [duplicate]

【发布时间】：2018-11-01 02:56:58

【问题描述】：

html <textarea/> 元素同时包含 2 个“值”字段；在查看元素的 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);

【问题讨论】：

它存储在DOM元素的value属性中

文本区域没有/不需要值属性。您仍然可以添加它

【参考方案1】：

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

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

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

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

当您使用getAttribute() 时，您会从返回Type1 的元素中读取（非标准）value 属性。

当您读取value 属性时，您（正确地）读取了包含在该字段的用户可编辑内容中的值，该字段返回Type2。

简而言之，你的困惑是因为你使用了一个名为value的属性和一个名为value的属性，它们不是一回事当应用于textarea时。