当前位置: 代码迷 >> JavaScript >> document.getElementById取值异常
  详细解决方案

document.getElementById取值异常

热度:82   发布时间:2012-03-09 21:42:52.0
document.getElementById取值错误
在页面中存在name和Id属性相同的情况下,为什么document.getElementById属性取到的元素是前者呢?

代码如下:
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN ">
<HTML>
<HEAD>
<TITLE>   New   Document   </TITLE>
<script   type= "text/javascript ">

function   spread(   code){


alert( "getById:   "   +   document.getElementById( "code1 ").value);
var   targetCode   =   document.getElementById(code.name);

//alert(code.value);

}

</script>
</HEAD>

<BODY   id= "body ">


<select   name= "code1 "   style= "width:   120px "   onChange= "return   spread(this); "   id= "select ">
<option   value= "1 "   id= "op1 "> JBoss </option>
<option   value= "2 "   id= "op1 "> Red   Hat </option>
<option   value= "3 "   id= "op1 "> Sun </option>
</select>


<input   type= "hidden "   id= "code1 "   value= "soncode1 ">
<input   id= "3 "   type= "hidden "   value= "hidden ">

</BODY>
</HTML>

为什么alert取到的值不是   soncode1   呢?

------解决方案--------------------
这个似乎是IE的BUG吧?
当有name和id相同时,getElementById会先抓在前边出现的.

FF就不会
------解决方案--------------------
这是IE的一个BUG,使用FIREFOX就没有问题
------解决方案--------------------
IE的BUG
lz可以用一个自定义属性来传值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type= "text/javascript ">
function spread( code){
alert( "getById: " + document.getElementById(code.hidden_name).value);
//var targetCode = document.getElementById(code.hidden_name);
//alert(code.value);
}
</script>
</HEAD>
<BODY id= "body ">
<select hidden_name= "code1 " style= "width: 120px " onChange= "return spread(this); " id= "select ">
<option value= "1 " id= "op1 "> JBoss </option>
<option value= "2 " id= "op1 "> Red Hat </option>
<option value= "3 " id= "op1 "> Sun </option>
</select>
<input type= "hidden " id= "code1 " value= "soncode1 ">
<input id= "3 " type= "hidden " value= "hidden ">
</BODY>
</HTML>
  相关解决方案