代码：
<!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>
