<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>
如何获取html控件自定义属性值HTML代码：
<input type="text" name="s01" data="自定义数据信息" />
JavaScript代码：
因为data不是input标签原生的属性，所以不能使用"点"操作。
非标准属性，要用：obj.getAttribute("data")的方式。
错误的用法：var data = obj.data
var data = document.getElementsByName("s01")[0].getAttribute('data')
自定义属性是比较好用的，尤其是表单中用来存放数据信息。
