# 🏅 3/18 (四) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

表單取值

<input type="text" class="txt" value="123">

const txt = document.querySelector(".txt");
/* txt.value = "hello!"; */  
console.log(txt.getAttribute("value"));
txt.setAttribute("value","嘿嘿嘿~");
/* console.log(txt.getAttribute("value")); */ 
console.log(txt.getAttribute("value"));

哈囉 wheresandrew
我是六角的前端助教 至榮

問題問得很好喔，同學可以參考以下兩篇討論:
討論一: https://stackoverflow.com/questions/29929797/setattribute-doesnt-work-the-way-i-expect-it-to
討論二: https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html

這邊也幫你做個摘要: 
建立 DOM 物件的時候會同時建立物件的 property 跟 attribute，
property 指的是 DOM 物件的各種特性，而 attribute 專指 DOM 物件上的「屬性」特性，如以下的 id、value 等

<input id="txt" value="Name">

一般來說相同名稱的 property 與 attribute 是可以互相對應的，如:
<input id="txt" value="Name">
在此 id property 指的就是 id 這個 attribute 的特性，為 #txt。

不過也是包含例外，像是 value 就是其中一個，value property 跟 value attribute 指的是不同的東西。
以一個 DOM 物件 <input id="txt" value="Name"> 為例，
value property 指的是 input 內「目前寫入的值」，而 value attribute 指的是 input 的 value 屬性值。
如果我們在 input 輸入 "John"，則它的 value property 就是 "John"，但它的 value attribute 依然會維持為 "Name"。

另外，
element.value 設定的是 DOM 物件的 value property，
setAttribute() 設定的是 DOM 物件的 value attribute。

以你的作業為例，
const txt = document.querySelector("#txt");
txt.value = "hello!";  
txt.setAttribute("value","嘿嘿嘿~");
console.log(txt.getAttribute("value"));

同學可以發現 console.log 的結果的確是顯示經由 setAttribute() 修改後的 「嘿嘿嘿~」，但畫面上仍然呈現的是「hello!」。

希望有幫助到你，有問題也可以再發問 :D

問題
---

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答

-->