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

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

IE中document.getElementById和document.getElementsByName特殊表现  

2010-02-21 11:42:30|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

org.quartz.impl.jdbcjobstore.LockException: Failure obtaining db row lock: - 和申 - 和申的个人主页

HTML元素属性Id和name应该是不同的,Id犹如身份证号码,在整个页面中应该是唯一的,而name犹如姓名,在整个页面中可以重复。
     JS中document.getElementById应该是用于捕捉具有某个id属性的一个元

素,document.getElementsByName是用于捕捉具有某个name属性的多个元素.
id和name不应当混淆。这一点在firefox中没有问题,而IE中的实现却不区分id和name。

 

eg.
 <input type="text" name="t" />
 <input type="text" id="t" />


javascript:
   alert(document.getElementsByName('t').length);

 

  在firefox中表现正确,输出长度为1,而在IE中输出却是2.

 

  同样,如果使用document.getElementById('t'),在firefox中可以得到正确的id="t"的元素,而由于IE不

区分id和name,因此它将得到第一个name="t"的元素。

 
 在IE中还有一个特殊点就是:IE中div和table等元素没有name属性,使用document.getElementsByName。得不到任何值,切记!


解决办法:
  1、元素命名id和name在一个页面中最好都不要相同(避免IE混淆id和name的bug)
  2、div和table等元素结合id和document.getElementsByTagName来使用

========================================================================================

========================================================================================

对ie不支持getElementsByName的解决办法

 

在firefox下getElementsByName运行正常,可一到IE下,就让我傻眼了,IE不支持,

怎么办?自己模范一个试试,如下:

function getElementsByName(tag,eltname){

var elts=document.getElementsByTagName(tag);

var count=0;

var elements=[];

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

     if(elts[i].getAttribute("name")==eltname){

        elements[count++]=elts[i];

     }

}

return elements;

}

使用方法:

<input type="checkbox" name="chk" />

<input type="checkbox" name="chk" />

<input type="checkbox" name="chk" />

var eltments=getElementsByName("input","chk");

注:因为是自己做的函数,所以查找是全局的。

=======================================================================

=======================================================================

有问题的代码

<html>
<head>

</head>
<body>
<div name="my_div">
 aaa
</div>
<div name="my_div">
 aaa
</div>
<div name="my_div_1">
 bbbb
</div>
<div name="my_div">
</div>
<div name="my_div">
</div>
<script>
function changeColor(){
 this.style.color = 'blue';
}
function removeColor(){
 this.style.color = 'black';
}
alert('sss');
var my_divs = document.getElementsByName("my_div");
alert(my_divs);
for(var i = 0;i<my_divs.length;i++){
 my_divs[i].innerHTML = '<P>AAA</P>SSSDFJDKFJ';
 my_divs[i].onmouseover = changeColor;
 my_divs[i].onmouseout = removeColor;
 alert('sss');
}
</script>
<body>
</html>

---------------------------------------------

修改后

<html>
<head>

</head>
<body>
<div name="my_div">
 aaa
</div>
<div name="my_div">
 aaa
</div>
<div name="my_div_1">
 bbbb
</div>
<div name="my_div">
</div>
<div name="my_div">
</div>
<script>
function changeColor(){
 this.style.color = 'blue';
}
function removeColor(){
 this.style.color = 'black';
}
function getElementsByName(tag,eltname){

var elts=document.getElementsByTagName(tag);

var count=0;

var elements=[];

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

     if(elts[i].getAttribute("name")==eltname){

        elements[count++]=elts[i];

     }

}

return elements;

}

var my_divs = getElementsByName('div',"my_div");

for(var i = 0;i<my_divs.length;i++){
 my_divs[i].innerHTML = '<P>AAA</P>SSSDFJDKFJ';
 my_divs[i].onmouseover = changeColor;
 my_divs[i].onmouseout = removeColor;

}
</script>
<body>
</html>

org.quartz.impl.jdbcjobstore.LockException: Failure obtaining db row lock: - 和申 - 和申的个人主页

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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