一个标签同时使用Class和ID,为什么JS中使用document.getElementById获取不到该对象

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<script type="text/JavaScript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="./js/jquery.curvycorners.source.js"></script>
<style>
html,body{    
    height: 100%;
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    background-image:url(./images/pattern.gif);
}h1
{
font: lighter 200% "Trebuchet MS",Arial sans-serif;
color: #FCFCFC
}.divParent
{
margin: 0px;
/*border: thick double yellow;*/
}
.myBox
{ 
    float:left;
    margin: 20px auto; 
    border: 0px solid #ffffff;
    color: #ffffff;
    width: 150px;    
    padding: 20px;
    text-align: left;
    background-color: #ff0000;
    border: 3px solid #ffffff;    
    position:relative; left:10px        /* Do rounding (native in Firefox and Safari, CC in IE) 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    CCborderRadius: 20px;*/
}.box2{
    background-color: #00ff00;
    position:relative; left:100px;
}.boxerror2{
    background-color:#ff0000;
    position:relative; left:100px;
}
.boxsucced2{
    background-color:#0000ff;
    position:relative; left:100px;
}.box3{
    background-color: #0000ff;
    position:relative; left:200px;
}
</style>
<script type="text/JavaScript">  $(function(){  
  settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }
  $('.myBox').corner(settings);  
  });;
  
        function SendData()
        {   
            document.getElementById('idDiv').className = 'myBox box3';
            window.setTimeout("SendData();",10000);
        }  
</script>
</head><body onload="SendData();" >
    <h1>JQuery Ajax指令执行流程图</h1>
    <div class="divParent">
    <div class="tip">
      <P></P>
    </div>
    <div class="myBox">
      指令执行ID:XXXXXXXXXX
    </div>

    <div ID="idDiv" class="myBox box2">
      任务1:##########
    </div>
    <div class="myBox box3">
      规则1:$$$$$$$$$$
    </div>
    <div class="myBox box3">
      规则2:$$$$$$$$$$
    </div>
    <div class="myBox box3">
      规则3:$$$$$$$$$$
    </div>             </div>
       <!--</td></tr></table>-->
</body>
</html>
SendData中的document.getElementById('idDiv').始终取道的是NULL,但是将任务1的class="myBox box2"去掉就可以。为什么呢？