为什么使用谷歌Chrome开发工具->；元素不'；是否反映了DOM中Javascript所做的一些更改？

我有以下表格：

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

以及以下Javascript代码：

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

$（函数（）{
$（'#test'）.addClass（'thereisnopoon'）.val（'blah'）；
})

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

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

jquery

$（）.val（'some_value'）

设置元素的value属性。它不会改变元素的value属性。使用

$（）.attr（'value'，'some_value'）时可以看到value attribute

---

谢谢！在我认为这只是与Jquery相关之前，我必须先阅读这些属性和属性：），也就是说，区分属性/属性是Jquery的概念。顺便说一句，如果有人感兴趣，这里会很好地解释属性/属性之间的区别：