querySelector()和querySelectorAll() ,你知道CSS 選取器嗎?

來源:互聯網
上載者:User
<!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>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.