代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oText = document.getElementById('text1');
var oBtn = document.getElementById('button1');
var oSelect = document.getElementById('select1');
var oImg = document.getElementById('img1')
var oP = document.getElementById('oP1')
oBtn.onclick = function(){
//alert(oText.value); 读取输入框的值
//alert(oText.value + '在' + oSelect.value); 读取输入框, 字符串'在', 列表值 (字符串连接)
//alert(oBtn.type); 读取按钮类型
/*
读操作 (读取)
元素. 属性名
*/
//oImg.src = oText.value; 修改图片地址
//oText.value = oSelect.value; 修改输入框值
//oText.value = '你好'; 替换输入框值 (oText.value 不为空)
/*
写操作 (替换, 修改)
元素. 属性名 = 新的值
*/
/*
oP.innerHTML 读取元素内所有 HTML 内容
oP.innerHTML = 新的值 替换元素内所有 HTML 内容
*/
//alert(oP.innerHTML);
//oP.innerHTML = oText.value;
/*!!! 注: 其中注解符号可自行删除去验证效果 */
}
}
</script>
</head>
<body>
<input type="text" name=""id="text1">
<select id="select1">
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="杭州"> 杭州 </option>
</select>
<!-- 注:<option > 标签应与 < select > 标签配合使用, 否则无意义 -->
<input type="button" name=""id="button1"value=" 按钮 " ><br />
<img src="./1.jpg" id="img1" width="200px" height="200px">
<p id="oP1">HelloWorld</p>
</body>
</html>
来源: http://www.jianshu.com/p/98cc605709c8