JavaScript-操作BOM对象

什么是BOM?

Bom：浏览器对象模型（Browser Object Model，简称 BOM）。浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

关于BOM知识的思维导图

主流浏览器的介绍

由于JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。

目前主流的浏览器：

• IE 6~11：国内用得最多的IE浏览器，历来对W3C标准支持差。从IE10开始支持ES6标准；
• Chrome：Google出品的基于Webkit内核浏览器，内置了非常强悍的JavaScript引擎——V8。由于Chrome一经安装就时刻保持自升级，所以不用管它的版本，最新版早就支持ES6了；
• Safari：Apple的Mac系统自带的基于Webkit内核的浏览器，从OS X 10.7 Lion自带的6.1版本开始支持ES6，目前最新的OS X 10.11 El Capitan自带的Safari版本是9.x，早已支持ES6；
• Firefox：Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey。早期的Firefox按版本发布，后来终于聪明地学习Chrome的做法进行自升级，时刻保持最新；

BOM对象

• window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
• navigator 对象，浏览器本身信息；
• screen 对象，客户端屏幕信息；
• location 对象，浏览器当前URL信息；
• document 对象，文档对象；
• history 对象，浏览器访问历史信息；

window

window 对象不但充当全局作用域，而且表示浏览器窗口。

window 对象有 innerWidth 和 innerHeight 属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。 outerWidth 和 outerHeight 属性，可以获取浏览器窗口的整个宽高。

兼容性：IE<=8不支持。

window对象常用方法:

• window.innerHeight
• window.innerWidth
• window.outerHeight
• window.outerWidth

弹框类的方法。前面可以省略window

• window.alert(‘提示信息’)
• window.prompt(“弹出输入框”)
• window.close() :关闭当前的网页

navigator

navigator 对象表示浏览器的信息，在编写时可不使用 window 这个前缀。最常用的属性包括：
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator.platform：操作系统类型；

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0"
navigator.platform
"Win32"

screen

screen 对象表示屏幕的信息，常用的属性有：

screen.width//屏幕宽度，以像素为单位；
1920px
screen.height//屏幕高度，以像素为单位；
1080px
screen.colorDepth//返回颜色位数，如8、16、24
24

location

location 对象表示当前页面的URL信息。

reload:function reload() //刷新网页
//设置新的地址
location.assign('https://blog.csdn.net/qq_45503643?spm=1001.2100.3001.5113')

document

document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构， document 对象就是整个DOM树的根节点。

document 的 title 属性是从HTML文档中的 xxx 读取的，但是可以动态改变

document.title
"百度一下，你就知道"
document.title='我是百度'
"我是百度"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取当前页面的Cookie

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)… ，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过 document.cookie 读取到当前页面的Cookie：

document.cookie;

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患。

为了解决这个问题，服务器在设置Cookie时可以使用 httpOnly ，设定了 httpOnly 的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持 httpOnly 选项，IE从IE6 SP1开始支持。

history

history 对象保存了浏览器的历史记录，JavaScript可以调用 history 对象的 back() 或 forward () ，相当于用户点击了浏览器的“后退”或“前进”按钮。

history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。

history.forward() - 加载历史列表中的下一个 URL。返回下一页。

history
History { length: 1, scrollRestoration: "auto", state: null }
history.back();
history.forward();