注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Start Know

自分を信じて、自分で一定でいけます

 
 
 

日志

 
 

Javascript 获得网页控件方法大全(附全码)   

2008-08-27 11:36:59|  分类: JavaScript学习日 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

编写JS的时候,总会调用的网页上的控件,今天有心情,把获得网页上的控件方法写了下,有不足,请补充.

【总结】一般我喜欢使用:document.getElementById()和document.all().现在觉得document.all.*比较不错!

关于其更深一步的原理暂不清楚,希望有明白的人给个深入讲解的链接!!

本帖以获得页面的text文本为例,获得控件后为其赋值为"你好!"

【附一:方法大全】

<!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">

 function AXzhz()

 {  

  //【AX为文本框的id,通过下面的方法对文本框赋内容】

  

  //【根据控件ID】

  document.getElementById("AX").value="你好!" ;

  //document.all("AX").value="你好!";  

  //document.all.AX.value="你好!";

  //不成功 document.AX.value="你好!";

  

  //document.body.all("AX").value="你好!";

  //document.body.all.AX.value="你好!";

  //不成功 document.body.getElementById("AX").value="你好!";

  

  //formid.AX.value="你好!";  

  //不成功 formid.getElementById("AX").value="你好!";

  //不成功 formid.all.getElementById("AX").value="你好!";

  //formid.all.AX.value="你好!";

  //formid.all("AX").value="你好!";

  

  //【根据控件name,返回的是一个数组集合,再通过下标获得控件】

  //document.getElementsByName("textfield")[0].value="你好!";

  //不成功 formid.all.getElementsByName("textfield")[0].value="你好!";

  //不成功 formid.getElementsByName("textfield")[0].value="你好!";

  

  //【根据标签,返回的是一个数组集合,严格来说是获得标签中的内容,估计用到的机会不是很多】  

  //document.getElementsByTagName("td")[1].innerHTML="你好!";    

 }

</script>

</head>

<body>

<form id="formid">

<table width="200" border="1">

<!--title是鼠标在上面的时候出现的提示-->

  <tr title="快啊快啊!!" onclick="AXzhz()">

    <td bgcolor="#FF9933">你点我啊!!<br> 

 <INPUT TYPE="text"value="根据标签测试时使用,请仔细观察结果!">

 </td>   

  </tr>

  <tr>

    <td  bgcolor="#0099FF"><p>AXzhz制作<br/>

        <input type="text" name="textfield" value="我要给这个文本框赋值!" id="AX"/>  

    </td></p>

  </tr>

</table>

</form>

</body>

</html>

【附二:getElementsByName详细】

<SCRIPT>

function fnGetNames(){

// Returns a collection with 2 INPUT type=text elements.

var aInput=document.getElementsByName("firstName");

document.all.AX.value=aInput[0].value+aInput[1].value;

}

</SCRIPT>

<INPUT TYPE="text"  id="AX">

<INPUT TYPE="text" NAME="firstName">

<INPUT TYPE="text" NAME="firstName">

<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">

【附三:getElementsByTagName详细】

<SCRIPT>

function AXzhz()

{

var aSpans = oDiv.getElementsByTagName("SPAN");

document.all.AX.value=aSpans[1].innerHTML;

}

</SCRIPT>

<input name="text" type="text"  id="AX" width="400px">

<DIV id="oDiv"><label onClick="AXzhz()">你点我啊!</label><br>

<SPAN>Immediate Child

<DIV>

<SPAN>Child of Child DIV

<INPUT TYPE="text" NAME="firstName" value="AX制作!">

</SPAN>

</DIV>

</SPAN>

</DIV>

  评论这张
 
阅读(670)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017