DOM文檔對象模型
DOM文檔對象模型是基於HTML樹的api，這裏可以把HTML結構看成是一顆樹形結構，使用DOM可以操作樹中的節點，即操作（增刪改查）HTML標籤。
getElementById
getElementById根據html標籤的id來獲取標籤對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body>
<form name="baseInfo" action="#" method="post">
姓名：<input type="text" id="name">
<br>
密碼：<input type="password" id="pwd" >
<br>
<input type="button" id="btn" name="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
var username = document.getElementById("name");
var pwd = document.getElementById("pwd");
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(username.value);
alert(pwd.value);
};
</script>
</html>
getElementsByName
getElementsByName根據html標籤的name來獲取一個數組對象，在html標籤中name值是可以重複的，所以該方法會返回一個數組對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>
<form name="baseInfo" action="#" method="post">
input：<input type="text" value="value1" name="monkey">
<br>
input：<input type="text" value="value2" name="monkey">
<br>
input：<input type="text" value="value3" name="monkey">
<br>
<input type="button" id="btn" name="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
var arr = document.getElementsByName("monkey");
//alert(arr.length);
/*
for(index in arr){
if(!arr.hasOwnProperty(index)){
continue;
}
alert(arr[index].value);
}
*/
for(var i=0; i<arr.length; i++){
alert(arr[i].value);
}
</script>
</html>
getElementsByTagName
getElementsByTagName根據標籤的名字來獲取數組對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body>
<form name="baseInfo" action="#" method="post">
input：<input type="text" value="value1" name="name">
<br>
input：<input type="text" value="value2" name="name">
<br>
input：<input type="text" value="value3" name="name">
<br>
<select name="hobby" id="hobby">
<option value="basketball">籃球</option>
<option value="football">足球</option>
<option value="volleyball">排球</option>
</select>
<br>
<select name="star" id="star" >
<option value="cl">成龍</option>
<option value="llj">李連杰</option>
<option value="zzd">甄子丹</option>
<option value="wj">吳京</option>
</select>
<br>
<input type="button" id="btn" name="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
/*
//獲取所有的input元素
var inputArr = document.getElementsByTagName("input");
alert(inputArr.length);
//輸出input中type="text"中的 value屬性值
for(var i=0; i<inputArr.length; i++){
if("text" == inputArr[i].type){
alert(inputArr[i].value);
}
}
//輸出所有option標籤中value的值
var optionArr = document.getElementsByTagName("option");
for(var i=0; i<optionArr.length; i++){
alert(optionArr[i].value);
}
//輸出所有下拉框 id="star"中option標籤中 value屬性的值
var star = document.getElementById("star");
var optionArr = star.getElementsByTagName("option");
for(var i=0; i<optionArr.length; i++){
alert(optionArr[i].value);
}
*/
//輸出下拉框中被選中的value值
var btn = document.getElementById("btn");
btn.onclick = function(){
var optionArr = document.getElementsByTagName("option");
for(var i=0; i<optionArr.length; i++){
if(optionArr[i].selected){
alert(optionArr[i].value);
}
}
};
</script>
</html>
DOM理解
DOM就像是JavaScript的方法，每個方法有不同的功能。