Window对象浏览器【DOM文档模型设计】应用与开发 (Web)-阿里云开发者社区

开发者社区> 开发与运维> 正文

Window对象浏览器【DOM文档模型设计】应用与开发 (Web)

简介:

 

   在浏览器Window对象中 DOM与我们关注浏览器BOM的整体结构有所不同,BOM是浏览器的整体结构(属性和行为)。而DOM只是关注浏览器所载入的文档,也就是HTML标签对象;DOM并不是BOM的替代品,它只是把能够统一的东西尽量标准化。JavaScript的核心就是通过操作BOM的对象来控制页面和对象的属性与其方法都有一些针对浏览器的,BOM在不同的浏览器中,获取同样的数据可能会通过不同的属性名,并且相同的属性名在不同的浏览器中会有不同的解释;BOM对象都拥有很多的属性和方法,对我们来说,不可能做到记住每个对象的所有属性,重要是知道一个对象能做什么,至于怎么做,完全可以查阅相关帮助来解决。从逻辑上说 BOM和DOM的关系,就是不管用什么设备生产月饼,生产出来的月饼必须符合国家月饼标准,这样没有引发食品卫生案件。从某种意义上来讲就是有规范性的条例来进行作业。DOM的总名称是(Docunment Object Model),以下图DOM对象模型“HTML文档”的流程示意图(640*437像素)所示:

    

    image

    DOM把HTML文档定义为带有元素、属性和文本的树型结构,也就是说一个HTML文档就是一个HTML文件,像ECMAScript规范样,DOM规范是规定了一些名字(属性名和方法名)以及这些名字的含义,还有它们操作的对象;这样对浏览器的DOM来说,是被浏览器实现,幷添加在浏览器每个DOM对象上的属性和方法。这些属性和方法在每个浏览器中都有相同的名称和含义,用这些书城和方法来进行编码会有很大程度地廉容各个浏览器。在DOM的规范中,“文档是一个很抽象的概念,文档就是指HTML标签对象。      测试DOM的支持度,W3C的网站提供每个测试浏览器对DOM的测试支持情况:

            http://www.w3.org/2003/02/06-dom-support.html

 

   编写JavaScript代码之前,我们首先了解文档模型的构成顺序是很必要的;下面序列代码:               (1)<script>                 //获取id属性为“n” 的元素引用                  alert(document.getElementById(“n”));             </script>             <div id="n”>             </div>     以下可把代码修改为:         (2)<script>                  //运用id属性为“b5”的元素引用  (以“b5”为自拟定义的一个元素,比如把元素“h1”用来引用“b5”,已上图所示)                  alert(document.createElement(“b5”);             </script>             <div id="b5">             </div>                

  

alert()函数显示的结果将得到null,因为在JJavaScript的代码执行时,文档树中还没形成id为"n"的元素。而这就跟文档对象模型产生有关。    浏览器会按照有序的依据HTML代码,从上到下顺序产生相应DOM模型,而JavaScript代码却可以在任何地方被执行,这就是危险所在。但你想要设置document.body的背景时,首先需要获取body对象的引用,如果代码是出现head里,那么程序是不会被执行的。大部分浏览器都支持document对象的一个回调事件---文档构建完成通知。这个事件会在浏览器构建完成DOM后触发。      把JavaScript代码(1)或代码(2)放在<head>里如:

       <head> 

             <script>

                   document.onreadystatechange = function() {

                        if(document.readyState == “complete”) {

                           alert(“DOM模型构建完毕!")

                        }

                   }

             </script>

        </head>

        <body>

               <div id="before”>

                    立即显示

               </div>

               <script>

                    for(var i=0; i<10000; i ++) {

                          //可注释此句以观察不同的效果

                          document.getElementById(“before”).innerHTML="立即显示";

                    }

               &lt;/script>

               <div id="after">

                    延迟显示 (对图片过大时需时间加载)

               </div>

          </body>

      注意:DOM模型构建完毕并不代表图片可完整地显示在页面上,对于较大的图片还需要慢慢加载。也就是img需要有它自己回调完成它自己事件。

     

本文转自huangyouliang10 51CTO博客,原文链接:http://blog.51cto.com/1572091hyl10/400610

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章