有人可以告诉我为什么我无法查看对输入字段上突出显示的值字段中的文本框所做的更新吗?
文本框有“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" />
最佳答案
Javascript 中的 .value
属性引用了 HTMLElement
object 的属性,Javascript 可以与之交互。元素属性值不一定与您在浏览器的检查器工具中看到的属性相对应。不过,如果您愿意,您可以通过 setAttribute
更改元素的属性。
(使用浏览器工具检查
以下片段:)
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 属性的方法之一。
关于javascript - Chrome 开发者工具不显示动态 DOM 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51605269/