浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括dom模型在内的。

如下:

BOM是什么?

BOM == Browser Object Model == 浏览器对象模型

js运行在浏览器中,每个页面都是一个window对象,主要关注点有以下:

  1. Window对象
  2. Screen
  3. Location
  4. History
  5. Navigator
  6. 对话框:alert,confirm,prompt

本质上来说,上面除了window对象,指向的都是window对象的属性或方法,如下图:

下面是一些简要说明:

1.Window

【说明】 所有浏览器均支持,表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  • 全局变量是window对象的属性
  • 全局函数是window对象的方法

为我们提供了操作浏览器的方法,比如关闭、开启页面,SPA中改变、禁用“后退”按钮。

一些常用的Window方法:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

2.Screen

【说明】 每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息,对于移动开发来说,通过Screen对象可获知设备的分辨率、DPI、可用尺寸等信息

常用属性 描述
height 返回显示器屏幕的高度
width 返回显示器屏幕的宽度
pixelDepth 返回显示屏幕的颜色分辨率
availHeight 可用高度(除开系统任务栏)
availWidth 可用宽度

3.Location

【说明】 Location 对象包含有关当前 URL 的信息。

常用属性 描述
例子 http://example.com:1234/test/test.htm#part2
hash 设置或返回 #part2
host 设置或返回 example.com:1234
href 设置或返回 http://example.com:1234/test/test.htm#part2
protocol 当前 URL 的协议 http:
pathName 当前访问路径 /test/test.htm
方法 描述
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

4.History

【说明】 History 对象包含用户(在浏览器窗口中)访问过的 URL。

常用属性 描述
length 返回浏览器历史列表中的 URL 数量
back() 加载浏览器历史列表中的前一个 URL
forward() 加载浏览器历史列表中的下一个 URL
go() 加载浏览器历史列表中指定URL

5.Navigator

BOM—Browser Object Model and DOM—Document Object Model的更多相关文章

  1. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. DOM (Document Object Model)文档对象模型

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  3. DOM(Document Object Model)

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

  4. DOM - Document Object Model

    Document Object Model

  5. DOM document object model learn

    DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...

  6. XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

    XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...

  7. DOM (文档对象模型(Document Object Model))

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  8. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

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

    JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM ...

随机推荐

  1. CSP 最大的矩形(201312-3)

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  2. ssh连接远程服务器出现Host key验证失败的解决方案

    原因可能是云服务器重装过,解决方法是找到提示的know_hosts文件,将报错的那一行的秘钥删掉即可.

  3. Elasticsearch入门教程(五):Elasticsearch查询(一)

    原文:Elasticsearch入门教程(五):Elasticsearch查询(一) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  4. 记一些使用mpvue时遇到的问题

    一.在mpvue中使用vuex(和在vue中使用不同) 1.vue中使用vuex,在main.js中: import store from './store' new Vue({ store })   ...

  5. subversion(SVN)服务配置及使用方法

      1.安装 yum install httpd httpd-devel subversion mod_dav_svn mod_auth_mysql -y 2.查看版本 svnserve --vers ...

  6. CAS JDK 证书错误学习笔记

    通过之前生产上发现的问题总结得出以下结论:  问题现象就是:由F5 进行分发到cas 两个服务端 导致 客户端访问时  (时好时坏的现象 ) 通过在服务端的查看apahce 的访问日志得出的结论  发 ...

  7. 怎么去掉zencart模板网址后面的zenid=数字这个东西

    搜索引擎优化后第一次进入商店网址URL后面会出现zenid=XXXX 如:http://afish.cnblogs.com/zencart-zenid.html?zenid=tbisz675099db ...

  8. 批处理清除svn版本信息

    for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q "%%a\.svn"

  9. shoeBox超实用的雪碧图(Sprite)图制作工具-使用

    从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...

  10. inode、软硬链接

    关于inode是什么,可以看这篇文章:http://www.cnblogs.com/adforce/p/3522433.html 如何查看inode ll -di /boot / /app查看文件和文 ...