如何获取html控件里的值

html-css09

如何获取html控件里的值,第1张

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>我是div</div>

<input type="text">

<a href="###">点击我获取所有标签里的值</a>

<script type="text/javascript">

    var div = document.getElementsByTagName('div')[0],

        input = document.getElementsByTagName('input')[0],

        a = document.getElementsByTagName('a')[0]

    a.onclick = function () {

        alert('div里的值是:' + div.innerHTML + '\n' + 'input里的值是:' + input.value + '\n' + 'a标签里的值是:' + a.innerHTML)

    }

</script>

</body>

</html>

一般来说,有起始和结束标签的(也就是双标签)获取其中的值都是用的innerHTML属性,单标签的获取其中的值都是用value属性的。

这个无法用 HTML 去读取,需要用到 JavaScript。代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

</head>

<body>

   <select id="select1">

       <option value="0">== 请选择 ==</option>

       <option value="1">苹果</option>

       <option value="2">香蕉</option>

       <option value="3">桃子</option>

   </select>

   <p id="result"></p>

   <script>

       document.getElementById('select1').onchange = function() {

           var getText = function(elm) {

               if (typeof elm.innerText == 'string') {

                   return elm.innerText

               }

               return elm.textContent

           }

           var value = this.value,

               index = this.selectedIndex,

               text = getText(this.options[index])

           document.getElementById('result').innerHTML = '【' + value + '】 ' + text

       }

   </script>

</body>

</html>