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