Chrome 开发工具不显示动态 DOM 更新

【问题标题】：Chrome Dev Tools not displaying dynamic DOM updatesChrome 开发工具不显示动态 DOM 更新
【发布时间】：2019-01-07 08:54:40
【问题描述】：

谁能告诉我为什么我无法查看对输入字段突出显示的值字段中的文本框所做的更新？

文本框有“new1234”，但 Chrome 开发工具说它是“Old123”。

这里是html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<input id="testInput" type="text" value="Old123" />
</body>
<script>
    document.getElementById('testInput').value = 'New1234';
</script>
</html>

这是屏幕截图：

document.getElementById('testInput').value = 'New1234';

&lt;input id="testInput" type="text" value="Old123" /&gt;

【问题讨论】：

有同样的问题，就我而言，我有一个重复的 ID。

标签： javascript html google-chrome-devtools

【解决方案1】：

Javascript 中的.value 属性引用了HTMLElement object 上的一个属性，Javascript 可以与之交互。元素属性值不一定与您在浏览器的检查器工具中看到的属性相对应。如果您愿意，可以通过setAttribute 更改元素的属性。

(Inspect下面的sn-ps用你的浏览器工具:)

document.getElementById('testInput').setAttribute('value', 'New1234');

&lt;input id="testInput" type="text" value="Old123" /&gt;

但是，虽然这有效，但通常最好将其分配给元素的纯 Javascript 属性，而不是更改 HTML 本身。

某些属性更改做更改属性，例如当您设置元素的id 或className 时：

const element = document.getElementById('testInput');
element.id = 'foo';
element.className = 'bar';

&lt;input id="testInput" type="text" value="Old123" /&gt;

但是分配给.value 并不是改变 HTML 属性的方法之一。

【讨论】：