在本篇開始之前，佛心的給大家 HTML Form 表單的設計入門預習。
畢竟要了解這一篇，是需要了解HTML 裡面一些原生設計好的元件的喔!
參考連結:
https://hackmd.io/@MikanS/BypCrTfkF
網頁表單內容擷取
HTML
好想吃漢來海港喔~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Practice/DOM/CSS/Decoration.css">
<title>DOM Get Values</title>
</head>
<body>
<input type="text" class="txt" value="想要吃甚麼?">
<select class="list">
<option value="肯德基">肯德基</option>
<option value="麥當勞">麥當勞</option>
<option value="拿坡里炸雞">拿坡里炸雞</option>
<option value="漢來海港">漢來海港</option>
<option value="寧夏夜市">寧夏夜市</option>
</select>
<script src="Practice/DOM/JS/all01.js"></script>
</body>
</html>JavaScript
加入選擇器document.querySelector() 此時你可以將文本內容提取出來。
const txt =document.querySelector(".txt");
console.log(txt.value);
const list =document.querySelector(".list");
console.log(list.value)
CSS
.txt{
background:gray;
padding: 5px;
font-size: 120%;
color:beige;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.list{
background:gray;
padding: 5px;
font-size: 120%;
color:beige;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
網頁表單畫面
執行視窗
操作執行視窗
此時我們可以來操作看看執行視窗，將.txt 賦於其他字串資料。
JavaScript
const txt =document.querySelector(".txt");
console.log(txt.value);
txt.value ="好像不知道要選甚麼..."
const list =document.querySelector(".list");
console.log(list.value)
執行視窗
直接操作執行視窗_觀看互動過後的更新值
將原本的肯德基 >> 拿坡里炸雞
輸入 list.value
你會得到了最新更改過的賦予值!
https://www.lovethispic.com/image/337093/the-day-you-stop-learning-is-the-day-you-start-dying