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