<input> 在 HTML 中没有价值，但在 JavaScript 中有价值？ [复制]

Posted 2023-02-21

【中文标题】<input> 在 HTML 中没有价值，但在 JavaScript 中有价值？ [复制]

【英文标题】：<input> has no value in HTML but does in JavaScript? [duplicate]

【发布时间】：2021-11-07 23:52:28

【问题描述】：

我在页面上找到了一个<input type="text" ... 元素，$('thatElement').val() 和$('thatElement')[0].value 返回值，该值显示在渲染输出中，但元素本身没有value="..." 属性。

一个输入元素的html中怎么可能没有value属性，但它仍然有值并且仍然显示它的值？

浏览器控制台：

> $('thatElement')[0].value
'The text that the page shows inside of the input'
> $('thatElement')[0].outerHTML
'<input autocomplete="off" type="text" readonly spellcheck="false">'

【问题讨论】：

取决于您的比较方式。您是否有机会比较页面源代码（不是通过任何浏览器中的开发工具）和 JS 评估？因为源代码（通过右键单击 -> 显示源代码）只会显示最初来自服务器的内容，从那时起很可能已经更改了。

请提供minimal reproducible example

@ArSeN 检查元素，甚至.outerHTML 显示没有值属性

Attributes are not the same as properties。该属性仅显示初始值并且（通常）永远不会改变。该属性具有当前值，但不显示在 HTML 中。

【参考方案1】：

文档的来源和它的 DOM 表示是有区别的。源文件是静态的，不会更改。 DOM 可能会改变。我认为这取决于你如何操作它。

在此示例中，输入值已设置但 DOM 未更新：（运行并检查结果）

document.querySelector('input').value = 42;

<input />

在这个例子中，输入和 DOM 都被更新了：

document.querySelector('input').setAttribute('value', 'foobar');

<input />