BOM结构

用户浏览网页的时候,浏览器会自动创建一些对象,这些对象存放着浏览器窗口的属性和相关信息,也就是大家熟称的BOM。浏览器对象模型是一个层次化的对象集,我们可以通过window对象访问所有对象集。层级关系如下图所示:

window对象

window对象表示浏览器中打开窗体,提供关于窗口状态的信息。可以使用window对象访问窗口中的文档,事件以及影响窗口的浏览器特性。同时大家应该知道,在javascript中window对象是全局对象,就像我们C#中的static一样(不知道对不对呃),也就是要引用当前窗体根本不需要特殊的语法,可以把该窗口的属性作为全局变量来使用。例如,我们可以直接写document,而不必写window.document。

window方法及其描述
方法  描述
alert() 弹出一个带有一段消息和确认按钮的窗体
blur() 把键盘焦点从顶层窗口移开
clearInterval() 取消由setInterval()设置的timeout
clearTimeout() 取消有setTimeout()方法设置的timeout
close() 关闭浏览器窗口
confirm() 显示带有一段消息以及确认按钮盒取消按钮的对话框
focus() 把键盘焦点给予一个窗口
moveBy() 可相对窗口的当前坐标移动指定的像素
moveTo() 把窗口的左上角移动到一个指定的坐标
open() 打开一个新的浏览器窗体
prompt() 显示可提示用户输入的对话框
resizeBy() 按照指定的像素调整窗口的大小
resizeTo() 把窗体的大小调整到指定的宽度和高度
scrollBy() 按照指定的像素值来滚动内容
scrollTo() 把内容滚动到指定的坐标
setInterval() 按照指定的周期(毫秒)来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或表达式
1.window.open("www.baidu.com","dqcx","height=200,width=300,top=20,left=20,resizable=yes");  //打开一个新的窗体

2.if(confirm(“确定关闭?”))
  alert("你点击了确定");
 else
  alert("你点击了取消");    //confirm()方法,注意它只接受一个参数,即要显示的文本 3.var name=prompt("姓名:","");    //prompt()方法,提示用户输入某些信息,接受连个参数,一个显示文本,一个默认输入文本 4.window.history.go(-1);    //后退一页
 window.history.go(1);    //前进一页

PS:相关的用法很多,这里简单列了几个,可以根据以上表格一一学习研究。

location对象

location对象存储在window对象的location属性中,表示当前页面的URL地址。

location对象的属性
属性 描述
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
port 设置或返回当前URL的端口号
protocol 设置或返回当前URL的协议
search 设置或返回从问号(?)开始的URL,也就是查询字符串
  1. href属性是既可以读又可以写的字符串
  2. local对象的方法
    • assign()方法:加载新的文档
    • reload()方法:重新加载当前文档(对于此方法由于网络延迟和系统资源等不确定因素,最好放到调用的最后一行)
    • replace()方法:用新的文档替换当前文档

navigator对象

通过这个例子应该蛮容易理解,就不列表格了、、、

screen对象

javascript可以获取某些关于用户屏幕的信息

 
属性 描述
availHeight 返回显示屏幕的高度(除window任务栏)
availWidth 返回显示屏幕的宽度(除window任务栏)
deviceXDPI 返回显示屏幕的每英寸水平点数
deviceXDPI 返回显示屏幕的每英寸垂直点数
fontSmoothingEnabled 返回用户是否在显示控制面板中开启了字体平滑
 height 返回显示屏幕的高度
 logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数
 logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数
 pixelDepth 返回 显示屏幕的颜色分辨率(比特每像素)
 updateInterval 设置或返回屏幕的刷新率
 width 返回显示器屏幕的宽度

每个window对象的screen属性都引用screen对象。该对象存放着有关显示器屏幕相关的信息,我们可以根据这些信息来优化页面的输入等等。

孤独的根号3

以上纯属基础知识,大家自己慢慢实际操作吧,我就点到为止咯!

接下来快要去实习了,从来木有出过远门,独处异乡的我该怎么办?想想,LOL也戒了,剩下博客园陪我,够了、、、成长ing

浏览器对象模型(BOM)的更多相关文章

  1. 浏览器对象模型BOM小结

    概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...

  2. 浏览器对象模型BOM

    第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...

  3. 浏览器对象模型BOM(Browser Object Model)

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

  4. JavaScript编程:浏览器对象模型BOM

    4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象:          窗口操作:            1.moveBy(dx,dy ...

  5. JavaScript 浏览器对象模型 (BOM)

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...

  6. JavaScript高级程序设计(第3版)学习笔记·第8章——浏览器对象模型BOM

    转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...

  7. 浏览器对象模型bom的作用是什么?

    浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...

  8. 浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构)

    浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...

  9. js浏览器对象模型-BOM

    bom browse object model 浏览器对象模型. 也就是window对象下面的东西. location 对象 window.location.href 表示打开窗口的路径. windo ...

随机推荐

  1. firebug调试js时提示调试器未激活处理办法

    firebug是web开发中最常用的分析调试软件,不过我今天使用在调试百度在线编辑器UEditor时一直提示调试器未激活. 从使用经验来看不应该啊,我都下了断点了为什么会提示调试器未激活呢!多次载入网 ...

  2. 使用edgesForExtendedLayout遇到的麻烦

    今天在写一个多界面之间来回返回的工程时,遇到的问题,建了两个类:FirstViewController 和 ButtonViewController. 由 FirstViewController 进入 ...

  3. Dreamweaver标签库

    .highlight .hll { background-color: #ffffcc } .highlight { background: #ffffff } .highlight .c { col ...

  4. NodeJS文件读取:感恩常在--抓把糖果,愉悦客人

    通过上一篇文章“NodeJS服务器:一行代码 = 一个的HTTP服务器”,我们已经开启了NodeJS之旅,开发了一个监听在8000端口的HTTP服务器,虽然功能很简单,但是,已经让我们感受到用Node ...

  5. CAF(C++ actor framework)(序列化之结构体,任意嵌套STL)(一)

    User-Defined Data Types in Messages(用户自定义类型)All user-defined types must be explicitly “announced” so ...

  6. Excel 数据分析技巧

    分享一个小技巧,Excel中,统计数据后,根据数据点之间的趋势,描绘出大致的曲线图,并且得到对于的公式. 1. 给出示例数据 2. 插入->散点图,右键点,选择添加趋势线,可以根据点数的走向,来 ...

  7. 长度有限制的字符串hash函数

    长度有限制的字符串hash函数 DJBHash是一种非常流行的算法,俗称"Times33"算法.Times33的算法很简单,就是不断的乘33,原型如下 hash(i) = hash ...

  8. extends 与 implements 的区别

    extends与implements是Java继承中使用的两个关键字,但extends与implements使用的情景不同: 1.接口继承接口,使用extends 2.类继承类时,用extends 3 ...

  9. bower——库管理工具

    bower了解: 随着网页功能的复杂化,各种网页效果的实现,现在单一的一个或两个库文件或许已经不能够满足我们的需要,但当有很多的库文件的时候,手动编辑已经不能胜任,对于引入的库文件而言,往往都是牵一发 ...

  10. php数组去重的函数代码

    php中数组去重的小例子.  代码如下: <?php   /** * 数组去重复的小函数 * by www.jbxue.com */     function assoc_unique($arr ...