Question

有人可以告诉我为什么我无法在输入字段的突出显示的值字段中查看对文本框所做的更新吗？

该文本框具有“ 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';

<input id="testInput" type="text" value="Old123" />

Answer 1

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

（Inspect和您的浏览器工具一起提供以下代码段：）

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

<input id="testInput" type="text" value="Old123" />

但是，尽管此起作用，通常最好将其分配给元素的纯Javascript属性，而不是更改HTML本身。

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

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

<input id="testInput" type="text" value="Old123" />

但是分配给.value的对象也不是更改HTML属性的对象之一。

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

1 个答案: