Chrome開發工具未顯示動態DOM更新

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 個解決方案

解決方案1
2 2018-07-31 04:05:25

Chrome開發工具未顯示動態DOM更新

問題描述

1 個解決方案

解決方案1 2 2018-07-31 04:05:25

解決方案1
2 2018-07-31 04:05:25