document.getElementsByName(); document.getElementById(); document.getElementsByTagName()的区别: document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。document.getElementById() 是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。 例如：HTML中有控件如下：<input type="radio" id="radio1" checked="checked" name="radiogroup1" /><input type="radio" id="radio2" name="radiogroup1" /><input type="radio" id="radio3" name="radiogroup1" />则：document.getElementsByName('radiogroup1') 取得的是这三个控件，可以用document.getElementsByName('radiogroup1')[0] 取得的是第一个控件。document.getElementById('radio1')取得的是第一个控件，document.getElementsByTagName('input') 取得的是这三个控件，可以用document.getElementsByTagName('input')[0] 取得的是第一个控件。getElementsByName('delID')返回的是所有名称为'delID'的控件组成的数组，数组就是一种集合。 数组的运用实例： <html> <head> <title></title> <script type="text/javascript"> <!-- function validate()//判断是否为空 { var array = getArray(); for (var i = 0; i < array.length; i++) { if(array[i].value==null||array[i].value==""){ alert("有空值"); return false } } alert("成功"); return true; } function getArray() { var array = new Array(); for (var i = 1; i <= 4; i++)//这里i设置为你以某种命名规则命名的控件数量 { array [i - 1] = document.getElementById('v' + i); //把以该命名规则命名的控件都放在array这个数组中 } return array;//返回包含以该命名规则命名的所有控件 } // --> </script> </head> <body> <form action="" name="form1" method="post"> <input type="text" name="a" id="v1" value="" />电脑 <input type="text" name="a" id="v2" value="" />家电 <input type="text" name="a" id="v3" value="" />中国 <input type="text" name="a" id="v4" value="" />苹果 <a href="#" mce_href="#" name="OK" onclick="validate();">提交</a> </form> </body> </html> 得到一个字符串实例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> <!-- function validate() { var result=""; for(var i=1;i<=4;i++){ result+=document.getElementById('v'+i).value+"," } alert(result); } // --> </script> </head> <body> <form action="" name="form1" method="post"> <input type="text" name="v1" id="v1" value="" />电脑<br /> <input type="text" name="v2" id="v2" value="" />家电<br /> <input type="text" name="v3" id="v3" value="" />中国<br /> <input type="text" name="v4" id="v4" value="" />苹果<br /> <input type="button" name="OK" onclick="validate();" value="提交" > </form> </body> </html> 至少有一个checkbox 被选中实例： <html> <head><title></title> <script type="text/javascript"> <!-- function check(){ var s = document.getElementsByName("pcs"); var check=0; //定义一个标识 for(var i=0;i <s.length;i++){ if(s[i].checked){ check=1; } } alert(check); if(check == 0){ alert("至少要有一个checkbox被选中!"); return false; } } // --> </script> </head> <body> <form action="" name="f1" method="post" onsubmit="check()"> <input type="checkbox" name="pcs" value="1"/>a <input type="checkbox" name="pcs" value="2"/>b <input type="checkbox" name="pcs" value="3"/>c <input type="checkbox" name="pcs" value="4"/>e <input type="checkbox" name="pcs" value="5"/>f <input type="checkbox" name="pcs" value="6"/>h <input type="submit" value="sub" /> </form> </body> <html> 得到select 框中的有规律值的总和 <html> <head> <mce:script type="text/javascript"><!-- function getCount() { //alert("start"); var count=0; var array = new Array(); for (var i = 1; i <= 3; i++) { array [i - 1] = document.getElementById('v' + i); if(array[i-1].value==0){ count=count+1; } } //alert(count); return count; } function isPass(){ //alert("start"); var c=getCount(); alert(c); } // --></mce:script> </head> <body> <form> <SELECT name="v1"> <OPTION value="0"> 000 </OPTION> <OPTION value="1"> 1111</OPTION> <OPTION value="2"> 22222</OPTION> </SELECT> <SELECT name="v2"> <OPTION value="0"> 0000</OPTION> <OPTION value="1"> 111</OPTION> <OPTION value="2"> 2222</OPTION> </SELECT> <SELECT name="v3"> <OPTION value="0"> 0000</OPTION> <OPTION value="1"> 111</OPTION> <OPTION value="2"> 2222</OPTION> </SELECT> <INPUT type="Submit" name="test" onclick="isPass()" value="submit" /> </form> </body> </html> 在页面中新增控件实例： <html> <head> <mce:script language="javascript"><!-- var count= 0 ; var maxfile = 5;//限制控件个数 增加元素 function addmx() { if(count >= maxfile) return;//限制最多maxfile个文件框 count++; //自增id不同的HTML对象，并附加到容器最后 var newDiv = "<div id=divStock" + count +">" + " <table align=center width=80% border=1><tr>" +"<td>股票代码</td><td><input name=stockList["+count+"].sdCode size=4></td>" +"<td>股票名称</td><td><input name=stockList["+count+"].sdName size=4></td>" +"<td>股票字母</td><td><input name=stockList["+count+"].sdPinYin size=4></td>" +"<td>股票类型</td><td><input name=stockList["+count+"].sdType size=4></td>" + "</tr>" + "</table>" + " <a href="javascript:delrow(" mce_href="javascript:delrow("'divStock" + count + "');>删除</a>" + " </div>"; document.getElementById("coll").insertAdjacentHTML("beforeEnd", newDiv); } //删除指定元素 function delrow(diva) { count--; document.getElementById(diva).parentNode.removeChild(document.getElementById(diva)); } // --></mce:script> </head> <body> <a href="#" mce_href="#" id="" onclick="addmx()" >新增页面控件</a> <div id="coll"></div> </body> </html>
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
