IE中的getElementById和getelementsbyname

ie中的这两个方法很奇怪，可能是bug，跟其他版本的浏览器中完全不同，而且不同的标签也有可能不同，现在做几个实验：

 

1.对于input标签

input标签中name和id完全是一样的，也就是说getelementById("elementId")查询时，找到的第一个input的id或name为elementId就返回。

<form>
<input name="username" value="111" />
<input id="username" name="name" value="222" />
</form>

<script type="text/javascript">
 alert(document.getElementById("username").value); 
  var gg = getElementById("username");
  alert(gg.value);   
  alert(document.getElementsByName('username').length);
</script>

上面这段程序运行的结果为111  和2

 

所以需要对getelementById进行改造：

<form>
<input name="username" value="111" />
<input id="username" name="name" value="222" />
</form>

<script type="text/javascript">
  var getElementById = function(el){
    var id = el;
    el = document.getElementById(el);
    if(el.id === id)
      return el;
    else{
      var nodes = document.all[id];
      for(var i = 0,len = nodes.length;i < len;i ++)
        if(nodes[i].id == id)
          return nodes[i];
    }
  }
  var gg = getElementById("username");
  alert(gg.value);
</script>

上面这段程序运行的结果为：222

对getElementsByName进行改造，下面的程序可以说明问题

<form>
<input name="username" value="111" />
<input id="username" name="name" value="222" />
</form>

<script type="text/javascript">
   var getElementsByName=function(elementName)
  {
   var n=elementName;
   var results=[];
   var i;
   var j=0;
   var nodes=document.getElementsByName(n);
   alert(nodes.length);  
   for(i=0;i<nodes.length;i++)
   {
    if(nodes[i].name==n)
    results[j]=nodes[i];
    j++;
   }
   alert(results.length);
   return results;   
  }
  alert('length:'+getElementsByName('username').length);
</script>

上面的程序运行的结果为：length：1

 

2.对于span标签

getelementById是正常的，getElementsByName是根据id来查询的，也就是说name在这两个方法中完全不起作用

<form>
<span id="mySpan">span1</span>
<span name="mySpan" id="spanId2">span2</span>
<span name="mySpan" id="spanId3">span3</span>
</form>

<script type="text/javascript">
 alert(document.getElementById("mySpan").innerText);
 alert(document.getElementsByName('mySpan').length);
 </script>

上面的程序运行的结果是 span1  和 1

所以需要对getElementsByName进行改造：

form name="form1">
<span id="mySpan">span1</span>
<span name="mySpan" id="spanId2">span2</span>
<span name="mySpan" id="spanId3">span3</span>
</form>

<script type="text/javascript">

  var getElementsByName=function(tag,elementName)
  {
   var n=elementName;
   var results=[];
   var i;
   var j=0;
   var nodes=document.getElementsByTagName(tag);
   alert(nodes.length);  
   for(i=0;i<nodes.length;i++)
   {
    if(nodes[i].name==n)
    {
    results[j]=nodes[i];
    j++;
   }
   }
   alert(results.length);
   return results;   
  }
  alert('length:'+getElementsByName('span','mySpan').length);
</script>

上面这段程序运行的结果为3 ，2,  2