由于script标签在被加载完成后会立即执行其中代码，如果在代码中要访问HTMLElement，可是这时候元素还没有加载进来，所以对元素的操作统统无效。

　　最早的时候使用window.onload = function(){...}，使得代码在页面完全加载完成后执行，这种方法对于页面资源很小的情况下是没问题的。弊端在于有时候页面中回加载一些比较费时的img、flash等资源，这种情况下浏览器会一直等待这些资源加载完成后再执行js代码。而浏览器中有DOM树跟Render树的区分，我们当然希望DOM树生成后便可以执行js代码，而不需要一定等待Render树完成后采取执行。

　　HTML5中加入了DOMContentLoaded事件，该事件在DOM树加载完成后便会触发（实际上大多数浏览器通常在样式资源加载完成后才会触发该事件，这个时候DOM可能早就加载完成了）。

　　对于不支持DOMContentLoaded事件的浏览器，我们通过监听document的onreadystatechange事件来判断DOM加载情况。从理论上来说，document有一属性名唤readyState，在页面加载过程中该属性的值会经过三次变化：loading（加载阶段）、interactive（DOM解析完成）、complete（完全加载完成，相当于onload）。但是浏览器的有时候并不会依次经过这三次变化。

　　在IE中有某些DOM方法，必须在DOM加载完成后方可调用（注意是调用，不是访问），一般情况下通过轮询调用doScroll方法来检测，当调用成功时表明DOM已加载完成。但需要注意的是，当页面中有iframe元素时，会等到iframe完全渲染结束后，调用才可成功，这时候于调用onload方法没什么区别。还有一点，在IE中，document.body必须在DOM解析完成后才可以访问body元素，而FF中即使DOM没有加载完成也可访问，这一点经常在IE中被用作判断DOM加载完成时的一个依据。

　　下面是参考资料后，自己写的一个domready方法：

 <!DOCTYPE html>

   <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <!--The viewport meta tag is used to improve the presentation and behavior of the samples

       on iOS devices-->

     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

     <title>MyDomReady</title>

     <script type="text/javascript">

         window.myDOMReady = function(callback){

             myDOMReady.isReady = false;

             var isBindReady = false;

             if (typeof callback === "function"){

                 myDOMReady.readyCallback = callback;

             }else{

                 myDOMReady.readyCallback = function(){};

             }

             bindReady();

             function onReady(){

                 console.log("onReady Function");

                 if (!myDOMReady.isReady){

                     if (!document.body){

                         setTimeout(onReady, 4);

                         return;

                     }

                     myDOMReady.isReady = true;

                     console.log('ready');

                     myDOMReady.readyCallback();

                 }

             };

             function domReady(){

                 if (document.addEventListener){

                     console.log('DOMContentLoaded');

                 }else if (document.attachEvent){

                     console.log("onreadystatechange   ", document.readyState);

                 }

                 onReady();

             }

             function bindReady(){

                 if (isBindReady){

                     return;

                 }

                 isBindReady = true;

                 if (document.addEventListener){

                     document.addEventListener('DOMContentLoaded', domReady, false);

                 }else if (document.attachEvent){

                     document.attachEvent('onreadystatechange', domReady);

                     var hasDoScroll = !!document.documentElement.doScroll,

                     noFrame = window.frameElement === null;

                     if (hasDoScroll && noFrame){

                         checkDoScroll();

                     }

                 }

                 window.onload = function(){

                     console.log('onloaded');

                     onReady();

                 };

             };

             function checkDoScroll(){

                 if (myDOMReady.isReady){

                     return;

                 }

                 try{

                     document.documentElement.doScroll('left');

                 }catch(err){

                     setTimeout(checkDoScroll, 4);

                     return;

                 }

                 console.log('checked');

                 onReady();

             };

         };

     </script>

     <script type="text/javascript">

         myDOMReady(function(){

             var map = document.getElementById('map');

             if (map){

                 alert('Yes');

             }else{

                 alert('No!');

             }

         });

         var map2 = document.getElementById('map');

             if (map2){

                 alert('Yes');

             }else{

                 alert('No!');

             }

     </script>

   </head> 

   <body class="claro">

   <input id="ipt" type="file" accept="image/png" >

     <div data-dojo-type="dijit/layout/BorderContainer"

          data-dojo-props="design:'headline', gutters:false"

          style="width:100%;height:100%;margin:0;">

       <div id="map"

            data-dojo-type="dijit/layout/ContentPane"

            data-dojo-props="region:'center'"

            style="padding:0;">

         <div style="position:absolute; right:20px; top:10px; z-Index:999;">

           <div data-dojo-type="dijit/TitlePane"

                data-dojo-props="title:'Switch Basemap', closable:false,  open:false">

             <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">

             <div id="basemapGallery" ></div></div>

           </div>

         </div>

       </div>

     </div>

   </body> 

   </html>

　　以下为chrome、FF、IE9和IE7、8中的测试结果

　　本人能力有限，其中有不足的地方欢迎各位道友不吝指正

DOM何时Ready的更多相关文章

  1. DOM加载过程中ready和load的区别

    在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...

  2. jquery的ready方法（DOM是否加载完）详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

  3. jQuery实现DOM加载方法源码分析

    传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但 ...

  4. (转载)jQuery 1.6 源码学习（二）——core.js[2]之extend&ready方法

    上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...

  5. DOJO DOM 功能

    In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...

  6. jQuery的document ready与 onload事件——你真的思考过吗？

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  7. $(document).ready vs $(window).load vs window.onload

    原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code whe ...

  8. jquery ready 延迟

    $.holdReady(true);//延迟 $.holdReady(false);//解延迟 用于下载文件的时候,异步操作 $.holdReady(true); $.getScript(" ...

  9. $( document ).ready()&$(window).load()

    $( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...

随机推荐

  1. 关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件。更新安装后，右下角有个提示说“系统监测到你的操作系统是盗版”。 如果没有安装的： 在系统提示更新的时候注意看一下，如果包含有“更新KB905474”就去掉“更新KB905474”方框前的勾，点击关闭（注意如果没有去掉那个勾得话，会找不到“关闭”，而是“确定”），在不在提示我该消息前打勾。 如果已经安装

    关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件.更新安装后,右下角有个提示说“系统监测到你的操作系统是盗版”. 如果没有安装的: 在系统提示更新的时候 ...

  2. 20151207Study

    Liberal lawmakers proposed a bill to reduce the cost of medicine for older Americans.自由主义立法者提出一条减少老年 ...

  3. 6SQL SERVER视图/索引

    一.视图 1.视图概念 ①视图是包含由一张或多张表的列组成的数据集.该表中的记录是由一条查询语句执行后所得到的查询结果所构成的. ②视图是一张虚拟表,它表示一张表的部分数据或多张表的综合数 据,其结构 ...

  4. Docker-3:Data Volume

    Sometimes,  applications need to share access to data or persist data after a container is deleted. ...

  5. SQL server 动态行转列

    用聚合函数配合CASE语句实现行转列功能: 现在分享一下具体实现代码: 转换前效果: PlanName PlanType PlanLimit 计划1 计划类型1 RMB 1,000,000 计划1 计 ...

  6. VMware Linux Guest 增加磁盘无需重启的方法

    摘要     常常需要需要给VMware Linux Guest增加磁盘适配一些测试场景,而又不想花费时间重启Guest,查找文档,发现一种简单的方法,记录一下操作步骤. 操作步骤 1 编辑Linux ...

  7. Maven 整合 spring profile实现多环境自动切换

    Maven 整合 spring profile实现多环境自动切换 时间:2014-03-19 15:32来源:Internet 作者:Internet 点击:525次 profile主要用在项目多环境 ...

  8. TColor 与 RGB 的转换函数

    function RGB2TColor(const R, G, B: Byte): Integer;begin  // convert hexa-decimal values to RGB  Resu ...

  9. asp.net(C#) Excel导出类 导出.xls文件

    ---恢复内容开始--- using Microsoft.Office.Interop.Excel; 针对office 2003需添加引用Microsoft   Excel   11.0   Obje ...

  10. Unsupported major.minor version 51.0解决方法

    jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0 问题原因:外部jar包使用jdk1.7(jdk7)编译,而使用此jar包的工程jd ...