为什么 Google Chrome 开发工具 -> 元素不反映 Javascript 在 DOM 中所做的一些更改？

Question

我有以下表格：

<form>
    <input type = "text" id = "test" class = 'test'>
</form>

以及以下 Javascript 代码：

<script>
    $(function(){
        $('#test').addClass('thereIsNoSpoon').val('blah');
    })
</script>

当我打开页面并查看 Chrome 的开发人员工具 -> 元素时，我可以在输入元素上看到 class 'thereIsNoSpoon' 是可见的（Chrome注意到变化，并为我显示），同时它不反映'value'属性的变化。也就是说，我可以在页面上看到此更改，但在 Dev Tools 中看不到。

我有两个问题 - 为什么会这样，reflecting/not 背后的规则是什么，反映了对 DOM 所做的更改。

Answer 1

jquery $().val('some_value') 设置 element.it 的值属性不会改变 element.you 的值属性当你使用 $().attr('value','some_value')

check this SO link

Why Google Chrome dev tools ->elements don't reflect some changes made by Javascript in DOM?