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. 设计模式——设计模式之禅day2

    接口隔离原则 接口分为两种: ● 实例接口( Object Interface) , 在Java中声明一个类, 然后用new关键字产生一个实例, 它是对一个类型的事物的描述, 这是一种接口. 比如你定 ...

  2. Win7显示隐藏文件,隐藏文件夹怎么显示?如何查看?

    隐藏文件技术是木马病毒传播最惯用的手法之一,它们利用大部分网友对基础操作的不熟悉特点,逃过用户的发现和检查,显示隐藏文件的标准设置方法大家都会使用,一旦隐藏问题与病毒木马结合起来,比如典型的autor ...

  3. 设置win7任务栏显示标题,而不显示缩略图

    win7系统的任务栏可以显示桌面缩略图,这是非常好的一个功能,但是有时候我们希望只显示标题,如下所示 怎样设置呢?只要在桌面上的计算机图标上面“右键”,选择“属性”,在弹出的窗口选择“高级系统设置”, ...

  4. sublime text3 针对于前端开发必备的插件

    1.emmet--前身Zen coding:HTML/CSS代码快速编写神器 2.jQuery Package for sublime Text:如果你离不开jQuery的话,这个必备-- 3.JS ...

  5. Xcode7中添加3DTouch

    首先是插件SBShortcutMenuSimulator的安装 1.git clone https://github.com/DeskConnect/SBShortcutMenuSimulator.g ...

  6. android xml的生成与解析

    Main java package com.itheima.xml; import android.app.Activity; import android.content.Context; impo ...

  7. Contiki系统介绍

    本文内容来源为contiki英文介绍,自己为了学习,将其大致翻译成中文,以便了解. 欢迎转载,转载请注明来源,如果有什么翻译不合适的地方,请留言指出,相互交流学习. 介绍 Contiki是一个开放源码 ...

  8. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  9. 如何实现zs无限期试用

    要删除的文件有两个,分别是.zs与10_0..zs保存的是版本号,10_0保存的是注册码,这两个文件存在的原理是:zend studio 每次启动的会检查这两个文件的创建时间,和当前日期对比,超过30 ...

  10. wordpress在Linux nginx下权限设置

    1.wordpress 权限对安装和使用效果的影响很大:权限错误将影响theme的安装:不能安装theme或者修改theme或删除theme. 相关设置:  chmod 755 wordpress f ...