JS基础实战课件14_JavaScript的BOM操作.pdf

JavaScript的BOM操作

王红元coderwhy

目录

1认识BOM操作

content

2全局对象window

3事件对象event

4location、history

5navigator、screen

6JSON、Storage

coderwhy认识BOM

◼BOM：浏览器对象模型（BrowserObjectModel）

简称BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；

比如navigator、location、history等对象；

◼JavaScript有一个非常重要的运行环境就是浏览器

而且浏览器本身又作为一个应用程序需要对其本身进行操作；

所以通常浏览器会有对应的对象模型（BOM，BrowserObjectModel）；

我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁；

◼BOM主要包括一下的对象模型：

window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；

location：浏览器连接到的对象的位置（URL）；

history：操作浏览器的历史；

navigator：用户代理（浏览器）的状态和标识（很少用到）；

screen：屏幕窗口信息（很少用到）；

coderwhywindow对象

◼window对象在浏览器中可以从两个视角来看待：

视角一：全局对象。

✓我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；

✓在浏览器中就是window对象；

视角二：浏览器窗口对象。

✓作为浏览器窗口时，提供了对浏览器操作的相关的API；

◼当然，这两个视角存在大量重叠的地方，所以不需要刻意去区分它们：

事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代

浏览器都支持它；

放在window对象上的所有属性都可以被访问；

使用var定义的变量会被添加到window对象中；

window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等；

coderwhywindow对象的作用

◼事实上window对象上肩负的重担是非常大的：

第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）；

第二：包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）；

第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）；

第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；

◼那么这些大量的属性、方法、事件在哪里查看呢？

MDN文档：/zh-CN/docs/Web/API/Window

◼查看MDN文档时，我们会发现有很多不同的符号，这里我解释一下是什么意思：

删除符号：表示这个API已经废弃，不推荐继续使用了；

点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）；

实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题；

coderwhywindow常见的属性

◼我