项目中 js 备忘

最新推荐文章于 2025-03-21 17:17:58 发布

Leson_Yin

最新推荐文章于 2025-03-21 17:17:58 发布

阅读量88

点赞数

分类专栏： RIA 文章标签： JavaScript HTML XHTML C C++ ViewUI

RIA 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用JavaScript通过document.getElementsByName、document.getElementById及document.getElementsByTagName等方法来选择和操作DOM元素，包括表单验证、获取控件值及动态添加控件等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'的控件组成的数组，数组就是一种集合。

数组的运用实例：

得到一个字符串实例：

<!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">  </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 被选中实例：

得到select 框中的有规律值的总和

在页面中新增控件实例：

<html> <head> <mce:script language="javascript"></mce:script> </head> <body> <a href="#" mce_href="#" id="" onclick="addmx()" >新增页面控件</a> <div id="coll"></div> </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 language="javascript" src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--

//表单验证函数
function check(){
	var msg="以下字段：\n";
	//所有的input 元素，包括：select 、textarea、button.
	$(":input[notnull=notnull]").each(function(i){
		var isNull=$($(":input[notnull=notnull]")[i]).val();
		if(isNull==null||isNull==""){
			msg+=$(this).attr("cname");
			msg+=",";
		}
	
	});
	msg+="\n不能为空！\n--------------------------------\n以下字段：\n"
	//验证数字
	//var reg=/^[1-9]\d*$|^0$/;//注意：故意限制了 0开头的数字。这种格式，如不需要，直接reg=/^\d+$/;
	//var reg = /^\d+(\.\d+)?$/;//小数也算纯数字
	var reg = /^[1-9]\d+(\.\d{2})?$|^0$/;//这个是结合上述两种情况。并小数点后保留两位
	$("input[number=number]").each(function(i){
		var isNum=$($("input[number=number]")[i]).val();//
		if(reg.test(isNum)!=true){
			msg+=$(this).attr("cname");
			msg+=",";
		}
	
	});
	msg+="\n只能为数字！"
	//
	
	alert(msg);
	
}


</script>
</head>

<body>
<form action="" method="get">
姓名:<input name="a" type="text" value="" cname="姓名" ctype="str.4" notnull="notnull"/><br />
编号:<input name="b" type="text" value="" cname="编号" ctype="num.16" notnull="notnull" /><br />
次数:<input name="" type="text" value="" cname="次数" ctype="num.20" number="number" /><br />
单价:<input name="" type="text" value="" cname="单价" ctype="num.20.2" number="number" /><br />
备注:<textarea name="" cols="" rows="" cname="备注" ctype="str.100"  notnull="notnull"></textarea><br />


国家:<select name="" cname="国家" ctype=""  notnull="notnull"></select><br />


<input name="test" type="button" cname="测试" value="测试" onclick="check();"  /><br />
</form>
</body>
</html>

回车将光标指定到自己设定的input输入框中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> 回车将光标定位到指定的位置 </title>
  <meta name="Generator" content="EditPlus">
  <script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function()
        {
            $("#myform input:text").keypress(function(e)
            {
                if (e.which == 13)                         //判断所按是否回车键
                {
                    var inputs = $("#myform :text[tab=tab]");//获取表单中指定的输入框
                    var idx = inputs.index(this);//获取当前焦点输入框所处的位置            
                    if (idx == inputs.length - 1)// 判断是否是最后一个输入框
                    {
                        if (confirm("最后一个输入框已经输入。\n是否提交?"))   //用户确认
                                                        $("#myform").submit();    //提交表单
                         
                    }
                    else
                    {
                        inputs[idx + 1].focus();       //设置焦点
                        inputs[idx + 1].select();       //选中文字
                    }

                    return false;//取消默认的提交行为
                }
            });
        });
</script>
<body>
  <form id="myform">

<label>姓名: </label><input type="text" id="username" name="username" tab="tab"/>
<label>年龄 : </label><input type="text" id="age" name="age" /><br />
<label>民族 : </label><select type="select" id="nationality" name="nationality"></select>
<label>地址 : </label><input type="text" id="address" name="address" tab="tab"/>

<input type="submit" value="submit" />

</form>

</body>
</html>