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的方法，每个方法有不同的功能。