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. struts2-权限拦截器、日志拦截器、execAndWait(进度条)拦截器配置

    1.权限拦截器 package login; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.Serv ...

  2. sql新手全套

    --[数据库]gocreate database DB_MGG  --添加数据库on(name=DB_MGG --逻辑名称,filename='C:\MDB\DB_MGG.mdf' --物理名称  逻 ...

  3. Javascript之计时

    // <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; chars ...

  4. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  5. [Bootstrap]全局样式(三)

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  6. log4j配置只打印指定jar或包的DEBUG信息

    有的时候查问题的时候需要打印第三方jar里面的debug信息,假如全部jar都打印的话日志文件会很大,这个时候可以配置log4j只打印指定jar的debug信息或者包,同时输出到了一个新的文件中. 比 ...

  7. CCNA第一讲笔记

    园区网:一组连续的局域网(校园网.企业内部网) 园区网拓扑: 一层楼的PC连接到一台交换机(同一层的PC可以互联):一栋楼的每层的交换机连接到同一台交换机(整栋楼的PC可以互联):每栋楼的交换机连接到 ...

  8. RestFul && HATEOAS && Spring-Data-Rest介绍

    1.什么是RestFul 经常上网的同学会发现,现代软件的一个重要趋势就是互联网化,几乎没有一款软件是纯粹的单机版了.通常的情况下,软件管理着服务器的资源以及这些资源的状态变化,用户通过在浏览器输入h ...

  9. 判断浏览器js代码

    (function(){ var UA = {}; var ua = navigator.userAgent.toLowerCase(),s; UA.ie = (s = ua.match(/(msie ...

  10. DevExpress gridLookUpEdit 实现多选

    一:创建类GridCheckMarksSelection   #region Fileds RepositoryItemGridLookUpEdit _currentRepository; prote ...