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---aaavalue
        var a2=document.all.aaaid.value='kkkkkkkkkkkkkkk222';
        //alert("all--aaaid---"+a2);//all--aaaid---kkkkkkkkkkkkkkk222
    }

    //测试不通过报错：document.all.cccname is not a function
    function 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);//undifined
        var 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--11
        var v2=document.all("dddid1",1).value;
        alert(v2);//ddd--12
        var v3=document.all("dddid1",2).value;
        alert(v3);//报错，因为没有第3个
    }



    function haha5(){
        var v1=document.all("dddname1",0).value;
        alert(v1);//ddd--11
        var v2=document.all("dddname1",1).value;
        alert(v2);//ddd--21
        var 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);//cc1
        alert(document.all["aaaid"].value);//aaavalue
        alert(document.all["dddid1"].value);//undifined
        alert(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---aaavalue
        var 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 function
    function 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);//undifined
        var 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--11
        var v2=document.all("dddid1",1).value;
        alert(v2);//ddd--12
        var v3=document.all("dddid1",2).value;
        alert(v3);//报错，因为没有第3个
    }


//谷歌浏览器，新浏览器IE11 效果
    function haha4(){
        var h4 = document.all('dddid1',0).value;
        // alert('h4=='+h4); undefined
        var h5 = document.all('dddid1',1).value;
        // alert('h5=='+h5);undefined
        var 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--11
        var v2=document.all("dddname1",1).value;
        alert(v2);//ddd--21
        var 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);//cc1

        alert(document.all["aaaid"].value);//aaavalue
        alert(document.all["dddid1"].value);//undifined
        alert(document.all["dddid1"][0].value);//ddd--11
    }

# javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

演练：使用VB开发多智能体协作的荣格八维分析器

avatar 2048 AI社区
cover

文字生视频技术中关键词提炼的原理与机制分析

avatar 2048 AI社区

AI应用架构师经验分享：负载均衡从理论到实战的全流程

为什么AI应用必须懂负载均衡？想象一下：你开发了一个AI图像识别API，初期只有100个用户，单台服务器就能扛住。但当用户涨到10万，单台服务器的CPU/GPU直接"冒烟"——请求排队、响应延迟从100ms变成10s，用户全跑了。这时候，负载均衡就是解决问题的关键：它能把海量请求分散到多台服务器，让每台机器都"吃饱但不撑"。用生活例子讲清负载均衡的底层逻辑（不是背概念，是理解"为什么要这么做"）；

avatar 2048 AI社区