為什么Google Chrome開發人員工具->元素無法反映Javascript在DOM中所做的某些更改？

Question

我有以下表格：

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

以及以下Javascript代碼：

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

當我打開頁面並查看Chrome的開發人員工具->元素時，我可以在輸入元素上看到“ thereIsNoSpoon”類是可見的（Chrome注意到了更改，並為我顯示了該更改）它不反映“值”屬性的變化。 也就是說，我可以在頁面上看到此更改，但在開發工具中看不到。

我有兩個問題-這是為什么，以及反映/不反映對DOM所做更改的背后規則是什么？

Answer 1

jQuery $().val('some_value')設置元素的value屬性。它不會更改元素的value屬性。使用$().attr('value','some_value')

檢查此SO鏈接