操作HTML DOM文档的一个难题是，你的JavaScript代码可能在DOM完全载入之前运行，这会导致你的代码产生一些问题。页面加载时浏览器内部操作的顺序大致是这样的： 　　1. HTML被解析。 　　2. 外部脚本/样式表被加载。 　　3. 文档解析过程中内联的脚本被执行。 　　4. HTML DOM构造完成。 　　5. 图像和外部内容被加载。 　　6. 页面加载完成。 　　头部包含的和从外部文件中载入的脚本实际上在HTML DOM构造好之前就执行了。正如前面提到的，这一个问题是很重要的，因为在那两种地方的执行的所有脚本将不能访问DOM。可喜的是，存在许多绕开这一问题的办法。 　　 　　等待页面加载
　　到目前为止，最常用的技术是在任何DOM操作之前简单地等待整个页面加载。使用这一技术，可以通过简单地给window对象的load事件附加一个在页面载入后触发的函数。在第六章中我将讨论关于事件的更多细节。程序5-10展示了一个在页面加载完成后执行DOM相关代码的例子。
　　程序5-10. 为window.onload属性附加回调函数的addEvent函数

代码:

//等待页面加载完成 //(使用了下一章描述的addEvent函数) addEvent(window, "load", function() {      //执行HTML DOM操作      next( id("everywhere") ).style.background = 'blue'; });

　　尽管这一操作可能是最简单的，它也将总是最慢的。从加载操作的顺序中，你可能已发现页面加载完成绝对是最后一步。这意味着如果在你的页面上有大量的图像、视频等等，你的用户在JavaScript最终执行前得等待很大一阵子。
　　等待大部分DOM加载
　　第二种技术很迂回，不太推荐使用。如果你还记得，我在上一节里说了，内联的脚本是在DOM构造以后执行的。这是一个半真半假的说法。那些脚本实际上是在DOM构造时遇上了就执行的。这就是说如果你有一段内联的脚本嵌在页面的中间部分，则该脚本只能立即拥有前半部分DOM的访问权。然而，把脚本作为非常靠后的元素嵌入页面中，就意味着你能够有效地对先于它出现的所有的DOM元素进行访问，获得一种假冒的模拟DOM加载的方式。这种方法的典型实现通常如程序5-11所示。
　　程序5-11. 通过向HTML DOM的结尾置入(包含函数调用的)<script>标签来判定DOM是否已经加载

复制内容到剪贴板

代码:

<html> < head>      <title>Testing DOM Loading</title>      <script type="text/javascript">          function init() {              alert( "The DOM is loaded!" );              tag("h1")[0].style.border = "4px solid black";          }      </script> < /head> < body>      <h1>Testing DOM Loading</h1>      <!--这里是大量的HTML -->      <script type="text/javascript">init();</script> < /body> < /html>

　　在这个例子里，一个内联脚本作为DOM的最后一个元素；它将是最后一个被解析和执行的。它所做的唯一的事情是调用init函数(函数内部应包含你想要处理的任何DOM相关的代码)。这一解决方案的存在的最大的问题在于，它是混乱的：给你的HTML里加入了额外的标记，只为了判定DOM是否已经加载。
　　断定DOM何时加载完成
　　最后一种可用来监视DOM加载的技术，可能是最复杂(从实现的角度来看)但也是最有效的。它结合了绑定到window的load事件的简易性和内联脚本技术的速度。 　　这一技术的原理是在不阻塞浏览器的前提下尽可能快地反复检查HTML DOM是否已经具有了你所需的特性。有几种东西可以被检查以判断HTML文档是否已经可以操作了： 　　1. document: 你需要检查DOM document是否已经存在。如果你检查得够快的话，它一开始可能仅仅是undefined。 　　2. document.getElementsByTagName和document.getElementByID: 检查document是否已经具备了经常使用的getElementsByTagName和getElementById函数；这些函数将在它们准备好被使用以后存在。 　　3. document.body: 作为额外的保障，检查<body>元素是否已完成被载入。理论上讲，前面的检查应该已经足够了，但是我发现过它们还不够好的例子。 　　使用这些检查，你将对DOM何时准备好被使用有一个足够好的把握（好到可能只错过了几毫秒）。这一方法近乎没有瑕疵。仅使用前面的检查，脚本可以在所有的现代浏览器里运行得相对很好了。然而，Firefox某些新的缓存机制的实现，导致了window的load事件实际上能够在你的脚本判断DOM是否就绪之前就触发。为了利用这一优势，我也加入了对window的load事件的检查，希望获得一些额外的速度。 　　最终，domReady函数在DOM就绪之前一直在收集所有的待运行函数的引用。一旦DOM确实准备好了，就遍历这些引用并一个一个地执行它们。程序5-12展示了一个可用来监视DOM何时完全载入的函数。
程序5-12. 监视DOM直到它准备好的一个函数

复制内容到剪贴板

代码:

function domReady( f ) {      //如果DOM已经载入，立即执行函数      if ( domReady.done ) return f();      //如果我们已经添加过函数      if ( domReady.timer ) {          //则将函数添加到待执行的函数列表          domReady.ready.push( f );      } else {          //为页面完成加载时附加一个事件，以防它率先发生          //使用了addEvent函数          addEvent( window, "load", isDOMReady );          //初始化待执行函数的数组          domReady.ready = [ f ];          //尽可能快地检查DOM是否已就绪          domReady.timer = setInterval( isDOMReady, 13 );      } } //检查DOM是否已经准备好导航 function isDOMReady() {      //如果我们断定页面已经加载完成了，则返回      if ( domReady.done ) return false;      //检查一些函数和元素是否已可访问      if ( document && document.getElementsByTagName &&          document.getElementById && document.body ) {          //如果它们已就绪，则停止检查          clearInterval( domReady.timer );          domReady.timer = null;                   //执行所有正在等待的函数          for ( var i = 0; i < domReady.ready.length; i++ )              domReady.ready[i]();          //记住现在我们已经完成          domReady.ready = null;          domReady.done = true;      } }

现在我们应该看看这在一个HTML文档里会是什么样。使用domReady函数就像使用addEvent函数(见第6章)一样，绑定你的特定函数到文档准备好导航和操作的时候被触发。在下面的例子里我把domReady函数放入了一个名为domready.js的外部JavaScript文件里。程序5-3展示了怎样使用新的domReady函数来监视DOM何时已载入。
　　程序5-13. 使用domReady函数在判定DOM何时准备好导航和修改

复制内容到剪贴板

代码:

<html> < head>      <title>Testing DOM Loading</title>      <script type="text/javascript" src="domready.js"></script>      <script type="text/javascript">          function tag(name, elem) {              //如果上下文元素未提供，则搜索整个文档              return (elem || document).getElementsByTagName(name);          }          domReady(function() {              alert( "The DOM is loaded!" );              tag("h1")[0].style.border = "4px solid black";          });      </script> < /head> < body>      <h1>Testing DOM Loading</h1>      <!--这里是大量的HTML -->      </body> < /html>

html dom的加载的更多相关文章

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

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

  2. 页面全部加载完毕和页面dom树加载完毕

    dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) {            ///兼容FF,Google   ...

  3. chrome://inspect调试html页面空白，DOM无法加载的解决方案

    chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...

  4. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  5. DOM元素加载之前执行的jQuery代码

    <script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuer ...

  6. 所有DOM元素加载之前执行的页面加载事件[jquery]

    <script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...

  7. document.readyState和document.DOMContentLoaded判断DOM的加载完成

    document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. ...

  8. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

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

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

随机推荐

  1. GUI图形界面

    一.界面元素 1.首层容器:Jwindow.JFrane(窗体).JDialge(对话框).JApplet. 2.组件:标签.文本框.密码框.按钮.下拉列表.单选框.复选框.文本域等 注:标签JLab ...

  2. CSMA/CD协议——学习笔记

    CSMA/CD协议要点: 1)适配器从网络层获得一个分组,加上以太网的首部和尾部,组成以太网帧,放入适配器的缓存中,准备发送. 2)若适配器检测到信道空闲(即在96比特时间内没有检测到信道上有信号), ...

  3. 部署WEB应用程序

    部署WEB应用程序: 1.在模板机上新建IIS站点 2.安装WebDeploy后在IIS控制台中导出站点为应用程序包 其站点在新虚机上必须存在,否则会报错,如下: 应用程序(C:\ProgramDat ...

  4. 用c#读取并分析sql2005日志

    用过logExplorer的朋友都会被他强悍的功能吸引,我写过一篇详细的操作文档可以参考http://blog.csdn.net/jinjazz/archive/2008/05/19/2459692. ...

  5. 转自邓凡平 《深入理解Android：Wi-Fi，NFC和GPS》章节连载[节选]--第七章 深入理解Wi-Fi P2P部分节选

    本章主要内容: 介绍Wi-Fi P2P相关知识: 介绍Android中WifiP2pService.wpa_supplicant的相关代码. 7.1  概述 承接第6章介绍的WSC,本章将继续介绍Wi ...

  6. C#多线程的介绍（园子里比较全的一篇）

    一.多线程的概念  Windows是一个多任务的系统,如果你使用的是windows 2000及其以上版本,你可以通过任务管理器查看当前系统运行的程序和进程.什么是进程呢?当一个程序开始运行时,它就是一 ...

  7. Python学习 之 包和模块

    1.rpm -ql python #查看python在计算机中安装了哪些文件 2.模块是一个可以导入的Python脚本文件 包是一堆按目录组织的模块和子包,目录下的__init__.py文件存放了包的 ...

  8. Redis HyperLogLog

      Redis 在 2.8.9 版本添加了 HyperLogLog 结构. Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非 ...

  9. 有符号的范围,-128~+127详解（zt）

    这是一个困惑了我几年的问题,它让我对现在的教科书和老师极其不满,从我N年前开始摸电脑时,就几乎在每一本C++教科书上都说,8位有符号的取值范围是-128~+127,为什么不是-127~+127呢,后来 ...

  10. 小白日记32：kali渗透测试之Web渗透-扫描工具-QWASP_ZAP

    扫描工具-QWASP_ZAP 十大安全工具之一,集成性工具,功能完善,而且强大.既可做主动扫描,也可做截断代理.开源免费跨平台,简单易用,体验相对混乱,但在主动扫描方面,相对占优.[kali集成] # ...