IE7中document.write()的问题

最新推荐文章于 2018-08-28 20:07:02 发布

zhangqi2610

最新推荐文章于 2018-08-28 20:07:02 发布

阅读量799

点赞数

分类专栏： javascript 疑惑文章标签： ie input attributes button safari 存储

本文链接：https://blog.csdn.net/bozhi2008/article/details/2899733

版权

javascript 疑惑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在IE7浏览器中遍历DOM元素属性时出现的错误现象，并通过四个不同修改版本的代码示例，分析了导致错误的原因。实验发现，直接使用DOM属性长度进行循环会导致错误，而将长度值存储到变量中则能正常运行。

摘要由CSDN通过智能技术生成

下面是一个简单的html页面,用于输出input元素的所有属性：

1. 在firefox，opera，safari，chrome下面都会输出三个设值的属性：type、onclick、value

2. 在IE6下面会输出108个属性，即ie支持的element元素的所有属性

3. 在IE7和IE8Beta1下运行的时候，在输出第一个属性language后就会出错。

 
 <html>
    <head>  
    <script type="text/javascript">
        function buttonClick(){
            var element = document.getElementsByTagName('input')[0];
            var attris = element.attributes;
            alert(attris.length);
            //var attributes = '';
            //var len = attris.length;
            for(i =0; i < attris.length; i++)
            {
                //attributes += attris.item(i).name;
                document.write(attris.item(i).name + ‘<br/>’ );
            }
            //document.write(attributes);               
        }
    </script>
    </head>
    <body>  
        <input type="button" οnclick="buttonClick()" value="button"/>   
    </body>
</html>
 

下面在 IE7 下面通过修改代码对出错原因做一些推断：

à修改1：根据属性的个数输出1，结果在输出的一个1之后便会出错

 
 function buttonClick(){
    var element = document.getElementsByTagName('input')[0];
    var attris = element.attributes;
    alert(attris.length);
    for(i =0; i < attris.length; i++)
        {
            document.write(1);      
        }
}
 

à修改2：同样是根据属性的个数输出1，但attris.length的值预先存储在变量中通过该变量进行循环，结果正常输出108个1.

 
 function buttonClick(){
    var element = document.getElementsByTagName('input')[0];
    var attris = element.attributes;
    alert(attris.length);
    var len = attris.length;
    for(i =0; i < len; i++)
        {
            document.write(1);      
        }
}
 

à修改3：输出所有属性，但attris.length的值预先存储在变量中通过该变量进行循环，结果同样在输出第一个属性language之后便出错

 
 function buttonClick(){
    var element = document.getElementsByTagName('input')[0];
    var attris = element.attributes;
    alert(attris.length);
    var len = attris.length;
    var outStr = ‘’;
    for(i =0; i < len; i++)
        document.write(attris.item(i).name + ‘<br/>’ );
}
 

à修改4：输出所有属性，但输出之前先在变量中存储所有属性值，结果正确输出所有属性名

 
 function buttonClick(){
    var element = document.getElementsByTagName('input')[0];
    var attris = element.attributes;
    alert(attris.length);
    var len = attris.length;
    var outStr = ‘’;
    for(i =0; i < len; i++)
         outStr +=attris[i].item(i).name;
    document.write(outStr);
}
 