`
ec06cumt
  • 浏览: 19898 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

getElementsByTagName的用法收集中...

javascript 
阅读更多
document.getElementsByTagName("img")怎么取图片的宽度

<script language=javascript>
document.write("<img name=myimage src=http://bbs.51js.com/images/51js.gif >");

var img_obj = document.getElementsByTagName("img");
  for(i=0;i<img_obj.length;i++){ 
  if(img_obj[i].name=="myimage") {alert( img_obj[i].width); }
}

</script>

提示：您可以先修改部分代码再运行

在取得的对象里(img_obj),他的那个属性是图片的宽度?

<img width="300" src="http://bbs.51js.com/images/51js.gif&qu ... quot;myimage">
<script language="javascript">
var img_obj=document.getElementsByTagName("img");
for(i=0;i<img_obj.length;i++)
{
if(img_obj[i].name="myimage")
    {
       alert(img_obj[i].width);
    }
}

加了个正则"\"

<script language=javascript>
document.write("<img name=\'myimage\' src=http:\/\/bbs.51js.com\/images\/51js.gif >");

var img_obj = document.getElementsByTagName("img");
  for(i=0;i<img_obj.length;i++){ 
  if(img_obj[i].name=="myimage") {alert( img_obj[i].width); }
}

</script>

以下实例是判断相应字符的个数：

<html><head><title>runcode</title><meta name="Author" content="Sheneyan" /></head><body><input /><input /><input /><input /><input /><input /><input /><input /><input /><script>alert(document.all.tags('input').length)</script></body></html>

以下是判断其中INPUT中有没有输入数值，至少有一个的话不返回0，没有就返回0：
function   foo(e)   {  
      var input_cart=document.getElementsByTagName("INPUT");
      var input_all=0;
      for   (var   i=0;   i<input_cart.length;   i++)   {  
          if   (input_cart[i].type=="text"   &&   input_cart[i].value!="")   {
         
              input_all=input_all+1;  
              //alert(input_all);
          }  
      }
      if (input_all==0)
      {
      alert("Please input one of the quantity of products that you want before you submit,thanks!");
      return false;
      }
  }  


【总结】一般我喜欢使用: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>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics