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