zoukankan      html  css  js  c++  java
  • 关于BOM的学习总结

    第四章 浏览器对象模(BOM)总结

      本章主要讲解了浏览器对象模型BOM的基本概念,以及windowdocumentlocationnavigatorscreen五个对象的常用属性及方法。

      其中window对象是BOM的核心,我们可以通过windowmoveBy()resizeTo()等方法移动、调节浏览器窗口位置、大小。但由于缺乏相应标准,不同的浏览器在使用该方法时得到的结果并不一样,例如,若使用moveBy(100,100)移动窗口,只有IE下能得到正确的结果,ChromeFF却得到不同的结果或者有些情况下甚至没有任何效果。值得一提的是,IE提供了window.screenLeftwindow.screenTop对象来判断浏览器窗口位置,在IE8中,这两个对象获取的是浏览器窗口视口左上角的位置(不包括顶部菜单栏),ChromeFF也支持此属性,但所获取的是整个浏览器左上角的位置,不过在较新的IE11中,所获取的位置已经与ChromeFireFox达成了一致。并且window对象的特性字符串也只在IE下可用,例如scrollableresizable等,ChromeFF根本不支持此属性。

      Window对象下还有一个opener属性,用于新窗口对打开它的父窗口的引用,但是此属性在IE8下并不支持。

      Window对象下我们用到较多的两个方法便是时间暂停setTimeout()和时间间隔setInterval()两个方法,网页上的广告图片轮播便可以它们来实现。

    本章中另外一个重要的对象便是document。它是唯一一个既属于BOM又属于DOM的对象。较为有意思的是write()方法其实是属于BOM下的document的一个方法,这里也就产生了一个问题,如何区分document的方法和属性到底属于BOM还是DOM呢?书上列举了documentformsimages集合,但通过document.forms[0]获得的表单的nodeType值为1,分明是文档结构模型中的一个元素节点,这两者之间到底有没有一个明确的区分界限呢?

      BOM中另外三个对象locationnavigatorscreen似乎在日常应用中相当较少。但其实它们还是有用武之地的,例如,在本次JS打飞机游戏中,我便通过给“重新开始”按钮添加一个location.reload()方法来重新加载了页面。而同样由于缺乏标准,navigator对象的属性和方法就形成了一片混乱。Screen对象下的colorDepth方法在IE8下得到的是颜色位数是32位,而ChromeFF下则是24位,但在IE11下,它也是24位了,这样的改变对于我们前端开发人员而言,无疑是一个较大的福音。

      技术的提升不能只靠保守自己的固有资本,乐于分享、善于学习,才能使我们收获更多,连微软都可以改变,我们为什么不能呢?

  • 相关阅读:
    12套有用的免费 PSD 格式 Android UI 素材
    使用 Canvas 和 JavaScript 创建逼真的下雨效果
    在网页设计中使用漂亮字体的16个优秀例子
    Koala – 开源的前端预处理器语言图形编译工具
    BackgroundCheck – 根据图片亮度智能切换元素样式
    经典网页设计:18个示例展示图片在网页中的使用
    TogetherJS – 酷!在网站中添加在线实时协作功能
    30个令人惊叹的灵感来自自然风光的网站设计《下篇》
    太有才了!创新的街头涂鸦手绘欣赏【中篇】
    15款美丽的设备模板,帮助展示你的 APP
  • 原文地址:https://www.cnblogs.com/yunkehe/p/3966656.html
Copyright © 2011-2022 走看看