为什么 Google Chrome 开发工具 ->elements 不能反映 Javascript 在 DOM 中所做的

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

本文关键字：Javascript DOM 不能 开发工具 Chrome Google elements 为什么      更新时间：2023-09-26

我有以下形式：

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

以及以下 Javascript 代码：

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

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

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

jquery $().val('some_value')设置 element.it 的 value 属性不会改变元素的 value 属性。使用 $().attr('value','some_value') 时可以看到 value 属性

检查此 SO 链接

相关文章：