zoukankan      html  css  js  c++  java
  • 记一次开发中一个奇特的错误

    最近写一个关于用JavaScript做图片自动切换问题发现一个非常奇特的问题,除了空格和换行外完全相同的代码,在Firefox下却有截然不同的运行结果,今天记录以提供他人留意及自我备查。

    废话不多说,先上代码给大家看看

    代码1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>依依园地</title>
    </head>
    <body>
        
    <div id="win">
            
    <ul id="picChange">
                
    <li>
                    
    <img  src="images/01.jpg" title="图片1"></li>
                
    <li>
                    
    <img  src="images/02.jpg" title="图片2"></li>
                
    <li>
                    
    <img  src="images/03.jpg" title="图片3"></li>
            
    </ul>
        
    </div>
    <script type="text/javascript">
    var pic = document.getElementById('picChange');
    var picList = pic.getElementsByTagName("li");
    alert(picList[
    0].firstChild);
    </script>
    </body>
    </html>


     以上代码1请分别在Firefox和IE中运行,Firefox出现的是 [object Text] ,而IE中出现的是[object],这里IE和Firefox都把picList[0].firstChild这个对象当作object对象,Firefox提示是Text类型对象,IE没有提示更细了。

    我们再运行下面这部分的代码看看,看清楚了,代码本身相同,但是li下面没做换行缩进。

    代码2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>依依园地</title>
    </head>
    <body>
        
    <div id="win">
            
    <ul id="picChange">
                
    <li><img  src="images/bigpic/01.jpg" title="护腰/HY005"></li>
                
    <li><img  src="images/bigpic/02.jpg" title="枕头吊臂/DB-004"></li>
                
    <li><img  src="images/bigpic/03.jpg" title="大护脚/HY-001"></li>
            
    </ul>
        
    </div>
    <script type="text/javascript">
    var pic = document.getElementById('picChange');
    var picList = pic.getElementsByTagName("li");
    alert(picList[
    0].firstChild);
    </script>
    </body>
    </html>

    以上代码2请分别在Firefox和IE中运行,Firefox出现的是 [object HTMLImageElement] ,而IE中出现的是[object],这里IE和Firefox都把picList[0].firstChild这个对象当作object对象,Firefox提示是HTMLImageElement类型对象,IE没有提示更细了。

    上下两种写法只是缩进和换行的差别,在IE中被认做相同的object对象,可是不同的缩进在Firefox中却代表了不同的对象,Firefox对HTML的解析实在令人费解。

    再此做记录,希望各位朋友看了有用,别因为跟我一样的问题半天没找到解决问题的方法。

  • 相关阅读:
    Android UI法宝的设计资源的开发
    Ural 1309 Dispute (递归)
    ZOJ3827 ACM-ICPC 2014 亚洲区域赛的比赛现场牡丹江I称号 Information Entropy 水的问题
    myeclipse如何恢复已删除的文件和代码
    在C#主线程和子线程将数据传递给对方如何实现
    SSh框架结构(Struts2.1+Hibernate4.0+Spring3.1)
    基于大数据分析的安全管理平台技术研究及应用【摘录】
    ulimit -t 引起的kill血案
    Oracle RAC 环境下的连接管理
    SMTP协议--在cmd下利用命令行发送邮件
  • 原文地址:https://www.cnblogs.com/lynnlin/p/1869391.html
Copyright © 2011-2022 走看看