javascript的getElementsByTagName()的应用

来源：互联网发布：梦觉教游泳知乎编辑：程序博客网时间：2024/06/06 01:52

<html>
<head>
<title>getElementByName</title>
</head>
<body>
<form name="from1" action="text.html" method="post">
<input type="text" name="username" value="Id1" id="tid1" onchange="change()"/><br/>
<input type="text" name="username" value="Id2" id="tid2"/><br/>
<input type="text" name="username" value="Id3" id="tid3"/><br/>
<input type="button" name="ok" value="baocun"/>
</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>
</body>
<script language="JavaScript">

//获取所有的input元素，返回值是数组

var getElements=document.getElementsByTagName("input");

//测试长度

alert(getElements.length);

//遍历输出value的值

//for(var i=0;i<getElements.length;i++){
// var getElement = getElements[i].value;
// alert(getElement);
//}

//输出type="text"中value属性的值不包含按钮(button)

for(var i=0;i<getElements.length;i++){
var getElement = getElements[i];
if(getElement.type!="button"){
alert(getElement.value);
}
}

//输出所有下拉选id="edu" 中 option标签中value属性的值

var optionElement = document.getElementById("edu");
var optionElements = optionElement.getElementsByTagName("option");
alert(optionElements.length);
for(var i=0;i<optionElements.length;i++){
alert(optionElements[i].value);
}

//输出所有下拉选内容
var optionget = document.getElementsByTagName("option");
alert(optionget.length);
for(var i=0;i<optionget.length;i++ ){

alert("输出所有下拉选内容:"+optionget[i].value);
}
//输出下拉选选中的值

alert("选中的值 :"+document.getElementById("edu").value);

</script>
</html