GetElementById,GetElementName

本文深入探讨了JavaScript中getElementById和getNameBy的方法应用,通过实例展示了如何利用这两个方法获取HTML元素,并详细解释了它们的使用场景及注意事项。同时,文章还对比了getElementById在不同上下文中的表现,以及getNameBy方法如何遍历和处理具有相同Name属性的元素。

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

GetElementById方法(非常常用),根据元素Id获得对象,网页中Id不能重复,也可以直接通过元素的Id来引用元素,但是有有效范围之类的问题,因此不建议直接通过Id操作元素,而是通过GetElementById .

GetElementById方法在VisualStudio2010中不能在Form中编写,否则有错误。

<head>

    <title></title>

    <script type ="text/javascript">

        functionbtnClick() {

            //            alert(textbox.value);

            //还可¦以样写不管¨在不在Form中D都可用

            vartxt = document.getElementById(textbox);

            alert(textbox.value);

        }

        functionbtnClickboss() {

//            alert(textboss.value);//错䨪误¨®

            //            alert(form1.textboss.value);//正y确¨¡¤

            vartxt = document.getElementById(textboss);

            alert(textboss.value);

        }

    </script>

</head>

<body>

<input type ="text" id ="textbox" />

<input type ="button"value="press" onclick="btnClick()" />

<!--<formaction="HTMLPage新?闻?代䨲码?1.htm"id ="form1">

<inputtype ="text" id ="textboss" />

<inputtype ="button" value ="whatever you write anything to out"onclick ="btnClickboss()" />

</form>-->

<input type ="text" id ="textboss" />

<input type ="button" value="whatever you write anything to out"onclick ="btnClickboss()"/>

</body>

</html>

GetElementName,根据元素的Name获得对象,由于页面中元素的Name可以重复,比如多个RadioButton的Name一样,因此GetElementByName返回值是对象的数组。

<head>

    <title></title>

    <script type ="text/javascript" >

    var radios= document.getElementsByName("gender");

    functionbtnClick() {

//        //在¨²JS中Dfor(var radio in radios)不?像?C#中D的Ì?foreach遍À¨¦历¤¨²每?个?元a素?,ê?而?是º?遍À¨¦历¤¨²的Ì?Key(ê¡§属º?性?)ê?

//            for (var radio in radios) {

//                alert(radio.value);

//            }

            for(i = 0; i < radios.length; i++) {

                varradio = radios[i];

                alert(radio.value);

            }

           

        }

    </script>

</head>

<body>

<input type="radio"name="gender"value="boy" />boy

<input type ="radio"name="gender"value="girl" />girl

<input type ="radio"name= "gender"value="protect"/>mimi

<input type ="button"value="click"onclick="btnClick()" />

</body>

</html>

 

 

<head>
    <title></title>
    <style type="text/css"> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
</head>
<body>
林依晨的资料
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%C1%D6%D2%C0%B3%BF&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
依晨好靓
</body>

睡前必听:SHE花都开好了,林依晨孤单北半球,少女时代Gee。今天又完了。。。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值