JavaScript基础教程之Window对象浏览器【DOM文档模型设计】应用与开发 (Web)
沉沙 2019-07-18 来源 : 阅读 1320 评论 0

摘要:本篇文章探讨了JavaScript基础教程之Window对象浏览器【DOM文档模型设计】应用与开发 (Web),希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章探讨了JavaScript基础教程之Window对象浏览器【DOM文档模型设计】应用与开发 (Web),希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

JavaScript基础教程之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像素)所示:

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

   编写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需要有它自己回调完成它自己事件。

"      本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程