IE中document.getElementById()对name和id的读取
2011-02-24 12:05
337 查看
<body>
<script language="javascript">
/*
IE document.getElementById BUG 演示DEMO
作者:朦朧中的罪惡
博客:http://be-evil.org
*/
function changeValue() {
var username = document.getElementById('username');
username.value = 'Whahaha';
}
</script>
<form action="IE_BUG2.html" method="get">
<p>name:<input type="text" name="username" /></p>
<p>name2:<input type="text" id="username" name="name" /></p>
<p><input type="button" value="改变" onclick="changeValue();" /></p>
</form>
</body>
</html>
在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象.
如何避免这个问题?
方法一:尽量避免在页面中出现name与id属性相同的对象
方法二:利用JavaScript的特点,重写document.getElementById
下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里,这里非常感谢他的文章给我作参考!
首先初步的尝试复写document.getElementById的方法
//根据userAgent确定用户使用IE浏览器
if (/msie/i.test (navigator.userAgent)) {
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem) {
//确定id相同
if(elem.id == id) {
return elem;
}else{
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
for(var i=1;i<document.all[id].length;i++){
if(document.all[id][i].id == id) {
return document.all[id][i];
}
}
}
}
return null;
};
}
看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute()方法的问题
代码:
<html>
<body>
<form id="myForm1">
<input id="user_id" name="user_id" value="text" />
</form>
<form id="myForm2">
<input id="id" name="id" value="text" />
</form>
<script type="text/javascript">
var formElement1 = document.getElementById('myForm1');
var formElement2 = document.getElementById('myForm2');
alert(formElement1.getAttribute('id')+ "/n" + formElement2.getAttribute('id'));
</script>
</body>
</html>
这个情况出现在表单中,如果有一个表单元素name的值为id的时候,在火狐下我们得到的结果是
myForm1 myForm2 但是在IE7下面,却变成了myForm1 [object],不知怎么的,ie错误的访问了它内部name位id的input元素而不是表单元素本身的id属性.使用formElement2.id的方法替代getAttribute()我们仍然可以得到相同的效果.(参见我先前遇到的一个IE的BUG)
幸运的是我们仍然可以通过以下的方式得到正确的元素:
formElement2.attributes['id'].value formElement2.getAttributeNode('id').value
既然还有以上的隐性BUG,那我们还要再次修改一下我们覆写的document.getElementById方法
if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem) {
//修改后的确认能得到id属性方法
if(elem.attributes['id'].value == id){
return elem;
}else{
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
for(var i=1;i<document.all[id].length;i++){
if(document.all[id][i].attributes['id'].value == id){
return document.all[id][i];
}
}
}
}
return null;
};
}
来源:http://be-evil.org/?post=86
<script language="javascript">
/*
IE document.getElementById BUG 演示DEMO
作者:朦朧中的罪惡
博客:http://be-evil.org
*/
function changeValue() {
var username = document.getElementById('username');
username.value = 'Whahaha';
}
</script>
<form action="IE_BUG2.html" method="get">
<p>name:<input type="text" name="username" /></p>
<p>name2:<input type="text" id="username" name="name" /></p>
<p><input type="button" value="改变" onclick="changeValue();" /></p>
</form>
</body>
</html>
在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象.
如何避免这个问题?
方法一:尽量避免在页面中出现name与id属性相同的对象
方法二:利用JavaScript的特点,重写document.getElementById
下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里,这里非常感谢他的文章给我作参考!
首先初步的尝试复写document.getElementById的方法
//根据userAgent确定用户使用IE浏览器
if (/msie/i.test (navigator.userAgent)) {
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem) {
//确定id相同
if(elem.id == id) {
return elem;
}else{
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
for(var i=1;i<document.all[id].length;i++){
if(document.all[id][i].id == id) {
return document.all[id][i];
}
}
}
}
return null;
};
}
看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute()方法的问题
代码:
<html>
<body>
<form id="myForm1">
<input id="user_id" name="user_id" value="text" />
</form>
<form id="myForm2">
<input id="id" name="id" value="text" />
</form>
<script type="text/javascript">
var formElement1 = document.getElementById('myForm1');
var formElement2 = document.getElementById('myForm2');
alert(formElement1.getAttribute('id')+ "/n" + formElement2.getAttribute('id'));
</script>
</body>
</html>
这个情况出现在表单中,如果有一个表单元素name的值为id的时候,在火狐下我们得到的结果是
myForm1 myForm2 但是在IE7下面,却变成了myForm1 [object],不知怎么的,ie错误的访问了它内部name位id的input元素而不是表单元素本身的id属性.使用formElement2.id的方法替代getAttribute()我们仍然可以得到相同的效果.(参见我先前遇到的一个IE的BUG)
幸运的是我们仍然可以通过以下的方式得到正确的元素:
formElement2.attributes['id'].value formElement2.getAttributeNode('id').value
既然还有以上的隐性BUG,那我们还要再次修改一下我们覆写的document.getElementById方法
if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem) {
//修改后的确认能得到id属性方法
if(elem.attributes['id'].value == id){
return elem;
}else{
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
for(var i=1;i<document.all[id].length;i++){
if(document.all[id][i].attributes['id'].value == id){
return document.all[id][i];
}
}
}
}
return null;
};
}
来源:http://be-evil.org/?post=86
相关文章推荐
- IE的document.getElementById混淆name和id属性的BUG
- js中document.getElementById(ID)与document.getElementsByName(Name)的区别
- 关于document.getElementById(ID与Name的区别)
- document.getElementsByName & document.getElementById 在IE与FF中不同实现
- 为什么document.getElementById("idname")取不到组件
- document.getElementsByName和document.getElementById 在IE与FF中不同实现
- document.getElementById("idName")用js方法获取元素,则设定风格属性的方法为
- document.getElementsByName & document.getElementById 在IE与FF中不同实现
- document.getElementsByName 、document.getElementById 在IE与FF中有着不同实现。
- IE中document.getElementById和document.getElementsByName特殊表现
- ie的大问题,关于document。getElementById和getElementsByName
- document.getElementsByName和document.getElementById 在IE与FF中不同实现
- IE中document.getElementById和document.getElementsByName特殊表现
- $("#id")与document.getElementById("id") 即 jQuery对象和DOM对象相互转换
- getElementById Vs getElementsByName(Javascript)细说HTML元素的ID和Name属性的区别
- getElementByID和getElementsByName和getElementsByTagName和document.all的区别
- document,document.all,getElementById,getElementsByName,getElementsByTagName
- 获取HTML元素3个方法:document.getElementsByName()、document.getElementById()、document.getElementsByTagName()
- document.getElementsByName()与 document.getElementById()、 document.documentElement.getElementsByTagName的区别
- $('#id')与document.getElementById( id )