嗨嗨！我是Winnie溫尼～

前言

前面的章節，我們認識到了DOM元素中修改文字內容的方法textContent、innerHTML、如何增加、修改和移除標籤中的屬性setAttribute、removeAttribute，今天要介紹的是各式的取值方法，其實前面介紹過的修改文字內容的方法也可以用來取值唷，一起來看看吧～！

取出標籤中的值

getAttribute 取出屬性的值

變數名稱.getAttribute("屬性");

innerHTML 取出內部的HTML結構

變數名稱.innerHTML;

textContent 取出文字內容

變數名稱.textContent;

綜合練習

例：

<!-- HTML -->
<a href="https://ithelp.ithome.com.tw"><span>iT邦幫忙</span></a>

//JavaScript
const link = document.querySelector("a") //選取a標籤
console.log(link.getAttribute("href")) //"https://ithelp.ithome.com.tw"
console.log(link.innerHTML) //"<span>iT邦幫忙</span>"
console.log(link.textContent) //"iT邦幫忙"

取出表單欄位的值

value

變數名稱.value;
例：

<!-- HTML -->
<input type="text" class="inputTxt" value="鐵人賽Day22 取值方法">
<select name="getValue" class="list">
  <option value="value 取出表單欄位值">value 取出表單欄位值</option>
  <option value="getAttribute 取出屬性值">getAttribute 取出屬性值</option>
  <option value="innerHTML 取出內部的HTML結構">innerHTML 取出內部的HTML結構</option>
  <option value="textContent 取出文字內容">textContent 取出文字內容</option>
</select>

//JavaScript
const inputTxt = document.querySelector(".inputTxt");
const list = document.querySelector(".list");
console.log(inputTxt.value); //"鐵人賽Day22 取值方法"
console.log(list.value); //"value 取出表單欄位值"
list.value = "getAttribute 取出屬性值"; //賦予新值，設定為預設值

參考資料

Element.getAttribute()
[JavaScript]取得input的value

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～