關於html的input元素，property和attribute的區別

以前在項目中遇到一個很tricky的關於html的input元素的問題，我的以爲挺有意思，因而記錄下來。這個問題也是在ui的自動化測試中，可能會碰到的一個問題。

爲了簡化起見，抽象這個問題的原型以下：

有一個html頁面，頁面包含一個input框，當改變input框的值的時候，按F12觀察頁面源碼，發現input框的value值和用戶輸入不一致，而且看到的value永遠是初始值，這是什麼緣由呢？以下圖：

網上查詢了一些資料，有一篇文章[參見reference1]解釋的很好。

簡單講，其實這問題涉及到property和attribute的區別。attribute是html頁面中某個元素element的屬性，如id，class，value等。而property是javascript對象的一個屬性，html頁面被瀏覽器渲染的過程當中，每個element都會建立一個相應的javascript對象，而全部的attribute會被裝載到attributes這個property上，這個attributes是一個array。以下圖所示：

能夠看到attributes[1]的值就是html value attribute的值，這個值不會隨着input框輸入值的變化而變化。

那麼怎樣才能拿到反應用戶輸入的實時的值呢？

其實這個問題也經常是在寫ui自動化測試腳本的時候可能會碰到的一個問題。舉個例子：一個ui的自動化測試腳本(自動化測試的工具多是nightwatch，selumun等)，經過dom api獲取一個input框的值，根據這個值是否爲null採起不一樣的邏輯，若是這個dom api用得不對，可能拿到的值就是初始值。

從參考文檔裏面瞭解到，如下三種方式均可以拿到value的值：

this.document.getElementById("test_input_issue").value

this.document.getElementById("test_input_issue").getAttribute("value")

this.document.getElementById("test_input_issue").defaultValue

第一種方式才能拿到實時的用戶輸入的值，其他兩種方式拿到的都是初始值，以下圖所示。當用戶輸入一個值以後，瀏覽器只是更新了input框對應的javascipt對象的value屬性，因此，按F12觀察源碼顯示的是初始值。

References

https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html

https://blog.csdn.net/zhy13087344578/article/details/79036967