最近在改造旧的应用,发现有些操作时灵时不灵,如:
window.document.all("ChargedByAdCode").value="350100"
有时正常,有时无效。
经过长时间摸索,终于找到原因:
1)旧页面的元素,可能出于浏览器兼容考虑,既有ID、也有name(除radio外都相同)。
2)初次调用window.document.all时,IE按照ID读取,返回的是单一元素,因此
window.document.all("ChargedByAdCode").value
能对指定元素赋值。
3)随后的互动脚本中调用了document.getElementsByName("ChargedByAdCode"),
此脚本返回的是元素集合
4)再次调用window.document.all时,IE就不是按照ID读取,而是按照Name--返回的是元素集合,因此
window.document.all("ChargedByAdCode").value
是undefined,任何操作失败。
在IE6、9(标准模式、兼容视图)下结果相同。在Firefox13下没有此类问题。
个人觉得:页面Javascript中应尽量避免使用window.document.all,应以getElementById代替,只有在checkbox等多选元素(name相同)处理时才使用getElementsByName。
参考:
HTML DOM all 的说明
http://www.w3school.com.cn/htmldom/coll_doc_all.asp
演示范例:
<form >
<input type="text" value="data" id="storenode" name="storenode"/>
<button οnclick="ie_test()">ie_test</button>
</form>
<script language=javascript>
function ie_test()
{
//初次访问window.document.all("storenode")按ID取出元素
alert("1.初次访问window.document.all,按ID取出元素:"+window.document.all("storenode").value);
//无实际意义的getElementsByName调用未对window.document.all造成影响
window.document.getElementsByName("storenode");
if(window.document.all("storenode").value===undefined){
alert("2.不可能的情况!");
}
else{
alert("2.无实际意义的getElementsByName调用未对window.document.all造成影响,仍然按ID取出元素:"+window.document.all("storenode").value);
}
<input type="text" value="data" id="storenode" name="storenode"/>
<button οnclick="ie_test()">ie_test</button>
</form>
<script language=javascript>
function ie_test()
{
//初次访问window.document.all("storenode")按ID取出元素
alert("1.初次访问window.document.all,按ID取出元素:"+window.document.all("storenode").value);
//无实际意义的getElementsByName调用未对window.document.all造成影响
window.document.getElementsByName("storenode");
if(window.document.all("storenode").value===undefined){
alert("2.不可能的情况!");
}
else{
alert("2.无实际意义的getElementsByName调用未对window.document.all造成影响,仍然按ID取出元素:"+window.document.all("storenode").value);
}
//赋值-有意义的getElementsByName调用对window.document.all造成影响,按name取出collection
var aa=window.document.getElementsByName("storenode");
if(window.document.all("storenode").value===undefined){
alert("3.赋值-有意义(?)的getElementsByName调用对window.document.all造成影响,按name取出的是collection,其长度为:"+window.document.all("storenode").length);
}
else{
alert("3.Firefox的结果--window.document.all不受getElementsByName影响,仍然按ID取出元素:"+window.document.all("storenode").value);
}
//赋值-有意义的getElementByid调用对window.document.all造成影响,按ID取出元素
var bb=window.document.getElementById("storenode");
if(bb.value===undefined){
alert("4.不可能的情况。");
return;
}
if(window.document.all("storenode").value===undefined){
alert("4.getElementById无法扭转getElementsByName调用对window.document.all造成影响,按name取出的是collection,其长度为:"+window.document.all("storenode").length);
}
else{
alert("4.Firefox的结果--window.document.all仍然按ID取出元素:"+window.document.all("storenode").value);
}
}
</script>
var aa=window.document.getElementsByName("storenode");
if(window.document.all("storenode").value===undefined){
alert("3.赋值-有意义(?)的getElementsByName调用对window.document.all造成影响,按name取出的是collection,其长度为:"+window.document.all("storenode").length);
}
else{
alert("3.Firefox的结果--window.document.all不受getElementsByName影响,仍然按ID取出元素:"+window.document.all("storenode").value);
}
//赋值-有意义的getElementByid调用对window.document.all造成影响,按ID取出元素
var bb=window.document.getElementById("storenode");
if(bb.value===undefined){
alert("4.不可能的情况。");
return;
}
if(window.document.all("storenode").value===undefined){
alert("4.getElementById无法扭转getElementsByName调用对window.document.all造成影响,按name取出的是collection,其长度为:"+window.document.all("storenode").length);
}
else{
alert("4.Firefox的结果--window.document.all仍然按ID取出元素:"+window.document.all("storenode").value);
}
}
</script>
IE测试情况:
firefox测试情况