BOM—Browser Object Model and DOM—Document Object Model
浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括dom模型在内的。
如下:
BOM是什么?
BOM == Browser Object Model == 浏览器对象模型。
js运行在浏览器中,每个页面都是一个window对象,主要关注点有以下:
- Window对象
- Screen
- Location
- History
- Navigator
- 对话框: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的更多相关文章
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- DOM (Document Object Model)文档对象模型
[理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...
- DOM(Document Object Model)
DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 对于元素结点的n ...
- DOM - Document Object Model
Document Object Model
- DOM document object model learn
DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...
- XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...
- DOM (文档对象模型(Document Object Model))
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...
- BOM(Browser Object Model) 浏览器对象模型
JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM ...
随机推荐
- [转载]C++STL概述
来源:https://www.cnblogs.com/dyllove98/p/3214898.html 什么是容器 首先,我们必须理解一下什么是容器,在 C++ 中容器被定义为:在数据存储上,有一种对 ...
- bzoj 3837 pa2013 Filary
bzoj 先搞第一问.考虑简单情况,如果\(m=2\),那么一定有个剩余类大小\(\ge \lceil\frac{n}{2}\rceil\),同时这也是答案下界 然后我们每次随机选出一个数\(a_i\ ...
- Notepad++ 文件丢失了,找回历史文件方法
一开始我还以为文件丢失找不到了,心凉了半截,后来找到了它的备份路径 C:\Users\Administrator\AppData\Roaming\Notepad++\backup
- BeanUtils组件的使用
BeanUtils能够使我们更方便的进行javabean的赋值操作,它的底层是反射的原理 主要方法有 copyProperties(Object object,String name,String v ...
- 从FBV到CBV四(访问频率限制)
比如我们有一个用户大转盘抽奖的功能,需要规定用户在一个小时内只能抽奖3次,那此时对接口的访问频率限制就显得尤为重要 其实在restframework中已经为我们提供了频率限制的组件 先捋一下请求到AP ...
- 关于windows下无法删除文件,需要TrueInstaller权限的问题
笔者办公室的笔记本今天突然弹出来一个ie浏览器,这不是为了下载其他浏览器而存在的浏览器吗?现在还臭不要脸的弹出来,然鹅我在删除文件夹的时候,提示我无法删除,必须要有TrueInstaller的权限,那 ...
- 2019-2020-1 20199319《Linux内核原理与分析》第五周作业
系统调用的三层机制(上) 基础知识 1.通过库函数的方式进行系统调用,库函数用来把系统调用给封装起来. 2.CPU有四种不同的执行级别:0.1.2.3,数字越小,特权越高.Linux操作系统中采用了0 ...
- emwin之BUTTON控件显示位图和流位图出现卡顿延迟的情况
@2019-05-16 [问题] 参照Armfly的emwin教程第46章 BUTTON-按钮控件显示位图和流位图,实际使用时导致界面切换卡顿延迟较大的情况 [环境] F429IGT6 + W9825 ...
- Mac安装PHP(Homebrew/php弃用、其他第三方tap也已经弃用或者迁移后的安装配置方案)
一.前言 看网上很多资料,大多数都是 mac安装php,只需要: brew tap homebrew/php brew install phpXX 安装php扩展只需要: brew install p ...
- Zookeeper的客户端使用
1.1 Zookeeper API(原生) 1)连接的创建是异步的,需要开发人员自行编码实现等待 2)连接没有超时自动的重连机制 3)Zookeeper本身没提供序列化机制,需要开发人员自行指定,从而 ...