标签元素的操作：document对象中的方法getElementsByTagName(“标签名称”)获取同标签名称的所有对象,返回的是一个数组
案例如下：
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="清华大学100周年_1" id="tid_1"><br>
<input type="text" name="tname" value="清华大学100周年_2" id="tid_2"><br>
<input type="text" name="tname" value="清华大学100周年_3" id="tid_3"><br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<!--1.给button按钮增加一个鼠标点击事件-->
<input type="button" value="打印option选中的值" onclick="showSelect()"/>
</body>
<script type="text/javascript">
//(1)获取所有的input元素,打印value的值
//使用document对象中的方法getElementsByTagName("标签名称")获取同标签名称的所有对象,返回的是一个数组
var inputEleArr = document.getElementsByTagName("input");
//测试获取到数组的长度
//alert(inputEleArr.length);//5
//遍历数组,打印value的值
for(var i=0; i<inputEleArr.length; i++){
//alert(inputEleArr[i].value);
}
//(2)输出type="text"中 value属性的值 不包含按钮(button)
for(var i=0; i<inputEleArr.length; i++){
//增加一个判断,当前input对象属性值type值是text,在输出value值
if(inputEleArr[i].type=="text"){
//alert(inputEleArr[i].value);
}
}
//(3)输出所有下拉选select的option标签中value的值
//1.获取所有的option标签对象,返回的是一个数组
var optEleArr = document.getElementsByTagName("option");
//2.遍历数组获取每一个option标签对象
for(var i=0; i<optEleArr.length; i++){
//3.打印option标签对象的value属性值
//alert(optEleArr[i].value);
}
//(4)输出所有下拉选 id="edu"中option标签中 value属性的值
//1.获取id是edu的select标签对象
var eduEle = document.getElementById("edu");
//2.使用edu的select标签对象调用getElementsByTagName("标签名称")方法,获取edu里边的option对象
var eduOptEleArr = eduEle.getElementsByTagName("option");
//3.遍历数组获取每一个option标签对象
for(var i=0; i<eduOptEleArr.length; i++){
//4.打印option标签对象的value属性值
//alert(eduOptEleArr[i].value);
}
//(5)点击"打印option选中的值"按钮,输出下拉选中选中的值
//1.给button按钮增加一个鼠标点击事件
//给按钮点击事件定义一个响应函数
function showSelect(){
//alert(1);
//2.在点击事情的响应函数中
//3.获取所有的option标签对象getElementsByTagName,返回一个数组
var optEleArrs = document.getElementsByTagName("option");
//4.遍历数组,获取每一个option标签对象
for(var i=0; i<optEleArrs.length; i++){
//5.在option标签对象中有一个属性selected,
//如果当前的option标签被选中,selected属性值返回true;未被选中返回false
//alert(optEleArrs[i].selected+"\t"+optEleArrs[i].value);
if(optEleArrs[i].selected){
//6.selected返回true打印value值
alert(optEleArrs[i].value);
}
}
}
</script>
</html>
在option标签对象中有一个属性selected，如果当前的option标签被选中，selected属性值返回true；未被选中返回false。再结合getElementsByTagName(“标签名称”)、给button按钮增加一个鼠标点击事件。就能实现，点击打印option选中的值按钮。输出下拉选中的值。
<!--1.给button按钮增加一个鼠标点击事件-->
<input type="button" value="打印option选中的值" onclick="showSelect()"/>