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

标签 javascript html google-chrome-devtools

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

文本框有“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> 

这是屏幕截图: enter image description here

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

最佳答案

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

(使用浏览器工具检查以下片段:)

document.getElementById('testInput').setAttribute('value', 'New1234');
<input id="testInput" type="text" value="Old123" />

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

某些属性更改确实会更改属性,例如当您设置元素的 idclassName 时:

const element = document.getElementById('testInput');
element.id = 'foo';
element.className = 'bar';
<input id="testInput" type="text" value="Old123" />

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

关于javascript - Chrome 开发者工具不显示动态 DOM 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51605269/

相关文章:

javascript - 谷歌浏览器重播 XHR 请求,但它发送时没有表单数据

javascript - 在开发工具 'Sources' 面板中以编程方式打开 JS/CSS 文件

java - 如何使用 Java 将 session 限制为单个浏览器选项卡

javascript - 如何在backbone.js中显示html内容

javascript - 如果路径可变,如何使用可选链接?

jquery - 如何使用 socket.io 在 Node js 中的右侧显示发送消息并在左侧显示接收消息

jquery - CSS 菜单列表项需要显示在 div 容器内

html - 当屏幕缩小(响应)时,如何让盒子在彼此下方对齐

javascript - Rails 中分离页面特定 JavaScript 的面向对象方法

google-chrome-devtools - 删除导航到 chrome 控制台中的消息