all 方法最初是由 IE 浏览器拥有的,并不属于 W3C 规范范畴,他返回调用 all 方法的 HTML 标记自身内的所有子孙元素的 HTML 标记集合 。
all 方法的详细说明请参见 MSDN:http://msdn.microsoft.com/en-us/library/ms537434(VS.85).aspx。
通常情况下使用 document.all 方法获得文档元素内所有 HTML 标记的集合,他最先使用在 IE 浏览器中。现在其他浏览器已经支持 document.all 这个方法了,但在支持细节上有差异。
一、document.all在 各浏览器中的支持
1. 所有浏览器使用 document.all 获取取元素的支持程度。
分析以下代码:
<script type="text/javascript">window.onload = function() {document.getElementById("info").innerHTML = "document.all : " + document.all;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>
在各浏览器中运行结果如下表:
IE6 IE7 IE8(Q) | document.all : [object] |
---|---|
Opera Safari IE8(S) | document.all : [object HTMLColletion] |
Firefox(Q) | document.all : [object HTML document.all.class] |
Firefox(S) | document.all : undefined |
Chrome | document.all : [object HTMLColletion] |
【注】:此处需要注意 Chrome 中 document.all 方法可直接使用,但无法被检测其返回的数据类型,因而代码中返回 undefined 值。
2. 在 IE 中 document.all 的布尔值是 true ,其他浏览器都是 false。
分析以下代码:
<script type="text/javascript">window.onload = function() {document.getElementById("info").innerHTML = "!!document.all : " + !!document.all;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>
在各浏览器中运行结果如下表:
IE6 IE7 IE8 | !!document.all : true |
---|---|
Firefox Chrome Safari Opera | !!document.all : false |
3. 所有浏览器都支持使用 document.all 取元素的方式。
分析以下代码:
<html id="HTML1">
<script type="text/javascript">window.onload = function() {var html = "<table border='1' style='font-size:12px;'>";function getElement(sec) {html += "<tr><td>" + sec + "</td>" + "<td>" + eval(sec).id + "</td>";}getElement("document.all(0)");getElement("document.all[0]");getElement("document.all.item(0)");getElement("document.all('SPAN1')");getElement("document.all.SPAN1");getElement("document.all['SPAN1']");getElement("document.all.namedItem('SPAN1')");html += "</table>";document.getElementById("info").innerHTML = html;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>
</html>
在各浏览器中表现如下:
IE6(Q) IE7(Q) IE8(Q) Chrome Safari Opera Firefox(Q) | |
---|---|
IE6(S) IE7(S) IE8(S) | |
Firefox(S) |
解决方案
由于 document.all 方法存在支持程度问题,获取元素还是推荐用 W3C DOM 规范中提供的 document.getElementById、document.getElementsByTagName 等标准方法。
二、document.all实战操作
html和js集合
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.8.3.min.js" type="text/javascript"></script><!--<script src="hhtest.js" type="text/javascript"></script>--><style></style>
</head><body style=" overflow-y:scroll;overflow-x:auto;">document.all是IE的私有属性。容易出现兼容性问题。<br>在火狐和谷歌的浏览器是无效的,不符合WEB标准。<br>不建议使用,特别是document.all[Index]的使用,难于维护。<br>document.all是页面内所有元素的一个集合。例如: <br>document.all(0)表示页面内第一个元素<br>document.all可以判断浏览器是否是IE <br>if(document.all){alert("is IE!");}
<br>document.all的使用方式有:<br><br>
<font color="red"></font>
document.all.元素id;(id必须唯一);<br>
document.all.元素name;(name必须唯一);<br><br><font color="red">document.all.元素id(index);(id可以有重复,并且index不能越界);<br>document.all.元素name(index);(name可以有重复,并且name不能越界);<br><br>document.all("元素id",index);(id可以有重复,并且index不能越界);<br>document.all("元素name",index);(name可以有重复,并且index不能越界);<br><br>
</font>document.all["元素id"];(id必须唯一);<br>
document.all["元素name"];(name必须唯一);<br><font color="red">document.all["元素id"][index];(id可以有重复,并且index不能越界);<br>document.all["元素name"][index];(name可以有重复,并且index不能越界);<br>
</font>
<br><br>
<hr>测试</hr>
<input type="text" id="aaaid" name="aaaname" value="aaavalue" /><br>
<input type="text" id="bbbid" name="bbbname" value="bbbvalue" /><br><br><input type="button" onclick="haha1()" value="测试document.all.id"/><br>---------------------------------------------<br>
<input type="text" id="cccid1" name="cccname" value="cc1" /><br>
<input type="text" id="cccid2" name="cccname" value="cc2" /><br><input type="button" onclick="haha2()" value="测试document.all.name(index)" /><br>---------------------------------------------<br>
<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button" onclick="haha3()" value="测试document.all.id或name" /><br>---------------------------------------------<br>
<input type="button" onclick="haha4()" value="测试id重复时document.all(id,index)" /><br>
---------------------------------------------<br>
<input type="button" onclick="haha5()" value="测试name重复时document.all(name,index)" /><br>---------------------------------------------<br>
<input type="button" onclick="haha6()" value="测试66" /><br>---------------------------------------------<br>
<input type="button" onclick="haha7()" value="7(name,index)" /><br></body>
</html><script>/*document.all的使用方式有:<br><br>document.all.元素id;(id必须唯一);document.all.元素name;(name必须唯一);document.all.元素id(index);(id可以有重复,并且index不能越界);document.all.元素name(index);(name可以有重复,并且name不能越界);document.all("元素id",index);(id可以有重复,并且index不能越界);document.all("元素name",index);(name可以有重复,并且index不能越界);document.all["元素id"];(id必须唯一);document.all["元素name"];(name必须唯一);document.all["元素id"][index];(id可以有重复,并且index不能越界);document.all["元素name"][index];(name可以有重复,并且index不能越界);*/function haha1(){var a=document.getElementById("aaaid").value;//alert("aaaid---"+a);//"aaaid---aaavaluevar a2=document.all.aaaid.value='kkkkkkkkkkkkkkk222';//alert("all--aaaid---"+a2);//all--aaaid---kkkkkkkkkkkkkkk222}//测试不通过报错:document.all.cccname is not a functionfunction haha2(){var a3=document.all.cccname(0).value;//alert("all--cccname(0)---"+a3);//all--cccname(0)---cc1//alert("all--cccname(1)---"+document.all.cccname(1).value);//all--cccname(0)---cc2// alert("all--cccname(2)---"+document.all.cccname(2).value);//报错}function haha3(){var a4=document.all.dddid1.value;//alert(a4);//undifinedvar a42=document.all.dddname1.value;//alert(a42);//undifined/*使用document.all.xxx的方式访问,无论是id还是name必须保证元素唯一,否则结果就是undifined*/}function haha4(){var v1=document.all("dddid1",0).value;alert(v1);//ddd--11var v2=document.all("dddid1",1).value;alert(v2);//ddd--12var v3=document.all("dddid1",2).value;alert(v3);//报错,因为没有第3个}function haha5(){var v1=document.all("dddname1",0).value;alert(v1);//ddd--11var v2=document.all("dddname1",1).value;alert(v2);//ddd--21var v3=document.all("dddname1",2).value;alert(v3);//报错,因为没有第3个}function haha6(){//alert(document.all["bbbname"].value);//bbbvalue。document.all.xxxname也可以这样写document.all["xxxname"]。必须不重复//alert(document.all["cccname"].value);//undifined
//alert(document.all["cccname"][0].value);//cc1alert(document.all["aaaid"].value);//aaavaluealert(document.all["dddid1"].value);//undifinedalert(document.all["dddid1"][0].value);//ddd--11}function haha7(){alert(document.all.dddidxxxxxxxxxx(0).value);// alert("all--dddid2(0)---"+document.all.dddid2(0).value);//all--dddid2(0)---ddd--21// alert("all--dddid2(1)---"+document.all.dddid2(1).value);//all--dddid2(0)---ddd--22// alert("all--dddid2(2)---"+document.all.dddid2(2).value);//报错}</script>
下面是细节讲解:
测试一、测试document.all.id
<input type="text" id="aaaid" name="aaaname" value="aaavalue" /><br>
<input type="text" id="bbbid" name="bbbname" value="bbbvalue" /><br><br><input type="button" onclick="haha1()" value="测试document.all.id"/><br>
function haha1(){var a=document.getElementById("aaaid").value;//alert("aaaid---"+a);//"aaaid---aaavaluevar a2=document.all.aaaid.value='kkkkkkkkkkkkkkk222';//alert("all--aaaid---"+a2);//all--aaaid---kkkkkkkkkkkkkkk222}
测试二、测试document.all.name(index)
目前谷歌浏览器不兼容、ie11也不兼容
<input type="text" id="cccid1" name="cccname" value="cc1" /><br>
<input type="text" id="cccid2" name="cccname" value="cc2" /><br><input type="button" onclick="haha2()" value="测试document.all.name(index)" /><br>
//谷歌测试不通过报错:document.all.cccname is not a functionfunction haha2(){var a3=document.all.cccname(0).value;//alert("all--cccname(0)---"+a3);//all--cccname(0)---cc1//alert("all--cccname(1)---"+document.all.cccname(1).value);//all--cccname(0)---cc2// alert("all--cccname(2)---"+document.all.cccname(2).value);//报错}
测试三、测试document.all.id或name 必须唯一
<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button" onclick="haha3()" value="测试document.all.id或name" /><br>
function haha3(){var a4=document.all.dddid1.value;//alert(a4);//undifinedvar a42=document.all.dddname1.value;//alert(a42);//undifined/*使用document.all.xxx的方式访问,无论是id还是name必须保证元素唯一,否则结果就是undifined*/}
测试四、测试id重复时document.all(id,index)
目前浏览器不支持.all()的方式调用
<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button" onclick="haha4()" value="测试id重复时document.all(id,index)" /><br>
//非谷歌浏览器,老旧的浏览器效果function haha4(){var v1=document.all("dddid1",0).value;alert(v1);//ddd--11var v2=document.all("dddid1",1).value;alert(v2);//ddd--12var v3=document.all("dddid1",2).value;alert(v3);//报错,因为没有第3个}//谷歌浏览器,新浏览器IE11 效果function haha4(){var h4 = document.all('dddid1',0).value;// alert('h4=='+h4); undefinedvar h5 = document.all('dddid1',1).value;// alert('h5=='+h5);undefinedvar h6 = document.all('dddid1',2).value;alert('h6-->'+h6); //h6-->undefined}
测试五、测试name重复时document.all(name,index)
<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button" onclick="haha5()" value="测试name重复时document.all(name,index)" />
//老旧浏览器、新浏览器报undefined function haha5(){var v1=document.all("dddname1",0).value;alert(v1);//ddd--11var v2=document.all("dddname1",1).value;alert(v2);//ddd--21var v3=document.all("dddname1",2).value;alert(v3);//报错,因为没有第3个}
测试六、document.all["元素id"][index]
<input type="button" onclick="haha6()" value="测试66" /><br>
function haha6(){//alert(document.all["bbbname"].value);//bbbvalue。document.all.xxxname也可以这样写document.all["xxxname"]。必须不重复//alert(document.all["cccname"].value);//undifined//alert(document.all["cccname"][0].value);//cc1alert(document.all["aaaid"].value);//aaavaluealert(document.all["dddid1"].value);//undifinedalert(document.all["dddid1"][0].value);//ddd--11}