<!DOCTYPE html><html><head><meta charset="utf-8"> <title>JAVASCRIPT 基礎</title> <style>input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;}input[type="button"]{width:120px;margin-left:35px;display:block;}</style></head><body><form name="input" action="demo-form.php" method="get">Firstname:<input type="text" name="fname" value="Peter" size="20">Lastname:<input type="text" name="lname" value="Griffin" size="20"><input type="button" onclick="getInput()" value="Example Button"></form><script>// querySelector 與 querySelectorAll 可以看做是DOM 操作與CSS選取器的緊密結合。// 通過querySelector 獲得 button 元素var button = document.querySelector('input[type="button"]'); console.log(button.value) // 怎樣去實現一點擊按鈕,彈出 輸入框裡面的內容,分為3部 // 1.點擊按鈕,一點擊按鈕就去執行一段JS 程式function getInput(){// 2. 獲得 輸入框內容,firstname ,lastname var input = document.querySelectorAll('input[type="text"]'); var firstname =input[0].value;var lastname = input[1].value;// 3. 把 firstname 和lastname 放到alert 裡面 alert(firstname+lastname)}</script></body></html>