javascript基本方法getElementByName，getElementByTagName，onchange

最新推荐文章于 2025-02-24 23:03:33 发布

小痕

最新推荐文章于 2025-02-24 23:03:33 发布

阅读量7.5k

点赞数 2

分类专栏： java javascript 文章标签： javascript input function html div 文档

本文链接：https://blog.youkuaiyun.com/jjaze3344/article/details/7281283

版权

java 同时被 2 个专栏收录

28 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文通过实例介绍了如何使用HTML创建表单以及如何利用JavaScript进行表单元素的选择与操作，包括使用getElementById, getElementsByTagName 和 getElementsByClassName等方法。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>getElementsByName</title>
    </head>
    <body>
        <div id="frm" align="center">
            用户名:<input type="text" name="username" id="uname"/>
        </div>
        <div id="frm1" align="center">
            你喜欢的明星有：
            <br/>
            <input type="checkbox" value="张柏芝" name="fav">张柏芝<input type="checkbox" value="小S" name="fav">小S<input type="checkbox" value="大S" name="fav">大S<input type="checkbox" value="杨幂" name="fav">杨幂
            <br/>
            <input type="checkbox" value="刘德华" name="fav">刘德华<input type="checkbox" value="武大郎" name="fav">武大郎<input type="checkbox" value="貂蝉" name="fav">貂蝉<input type="checkbox" value="张学友" name="fav">张学友
        </div>
    </body>
</html>
<script type="text/javascript">
    <!--
    //当窗体加载完毕后触发此函<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>getElementByTagName,onchange</title>
    </head>
    <body>
        <div id="frm" align="center">
            用户名:<input type="text" name="username" id="uname"/>
        </div>
        <div id="frm1" align="center">
            你的学历：<hr color="red"/>
            <br/>
            <select name="edu" id="edus">
                <option value="博士">博士</option>
                <option value="硕士">硕士</option>
                <option value="本科">本科</option>
                <option value="专科">专科</option>
                <option value="高中">高中</option>
                <option value="中专">中专</option>
            </select>
        </div>
    </body>
</html>
<script type="text/javascript">
    <!--
    //当窗体加载完毕后触发此函数
    window.onload = function(){
        //获取id为edus中所有的option元素
        var edus = document.getElementById("edus");
        var options = edus.getElementsByTagName("option");
        
        for (var i = 0; i < options.length; i++) {
            var option = options[i];
            dis(option);
			alert(option.firstChild.nodeValue);
            /*注册事件--不用onclick事件
             option.onclick = function(){
             alert(this.value);
             }*/
        }
        //为edus添加触发事件
        edus.onchange = function(){
            //弹出选择的option的value值
            alert("你选择了："+this.value);
        }
        
        //document.write(msg);
    }
    
    var msg = "";
    function dis(opt){
        msg += "<br/>" + opt.value + "<br/>";
    }
    
    //-->
</script>


数 window.onload = function(){//getElementsByName根据属性的name获取所有的元素节点，并返回一个集合 var elements = document.getElementsByName("fav");//显示出集合的大小alert(elements.length);for(var i=0;i<elements.length;i++){//为所有节点添加事件elements[i].onclick = function(){//触发事件函数display(this.value);}}
 }//显示输出var msg = "";function display(node){msg += node+",";alert(msg+"爱死你了！")} //--></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>getElementByTagName</title>
    </head>
    <body>
        <div id="frm" align="center">
            用户名:<input type="text" name="username" id="uname"/>
        </div>
        <div id="frm1" align="center">
            你喜欢的明星有：
            <br/>
            <input type="checkbox" value="张柏芝" name="fav">张柏芝<input type="checkbox" value="小S" name="fav">小S<input type="checkbox" value="大S" name="fav">大S<input type="checkbox" value="杨幂" name="fav">杨幂
            <br/>
            <input type="checkbox" value="刘德华" name="fav">刘德华<input type="checkbox" value="武大郎" name="fav">武大郎<input type="checkbox" value="貂蝉" name="fav">貂蝉<input type="checkbox" value="张学友" name="fav">张学友
        </div>
    </body>
</html>
<script type="text/javascript">
    <!--
    //当窗体加载完毕后触发此函数
    window.onload = function(){
		//document.getElementByTagName 返回一个结果集
		//根据id名查出frm节点对象
		var frm = document.getElementById("frm");
		//获取frm节点力边所有的标签名称为input的节点对象
		var inputs = frm.getElementsByTagName("input");
		//弹出节点个数
		alert("frm中标签名为input的节点的个数为："+inputs.length);
		//获取文档中所有标签名为input的节点
		var docInputs = document.getElementsByTagName("input");
		alert("文档中名标签名为input的节点的个数为："+docInputs.length);
		//遍历输出文档中input标签type类型我checkbox的所有的元素节点的nodeName，nodeValeue，nodeType
		
		var msg = "";
		for(var i=0;i<docInputs.length;i++){
			var ipt = docInputs[i];
			display(ipt);
			ipt.onclick = function(){
				//弹出所有被点击的对象
				msg+=this.value+",";
				alert("我喜欢你！"+msg);
			}
		}
    }
	
	//显示
	function display(node){
		alert("nodeName---"+node.nodeName+" nodeValue---"+node.nodeValue+" nodeType---"+node.nodeType);
	}
    //-->
</script>