BOM与DOM(复习巩固笔记)

JavaScript是由ECMAScript、BOM和DOM组成的。ECMAScript就是JavaScript的基本语法、数组、函数和对象。BOM（browser object model）浏览器对象模型，DOM（Document Object Model）文档对象模型。 附上：web前端初级.pdf

一、什么是BOM对象

BOM：Brower Object Model，指的是浏览器对象模型。
作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。
浏览器对象：浏览器提供的一系列内置对象的统称。
BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。
(1)document(文档对象)：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。
(2)history(历史对象)：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。
(3)location(地址栏对象)：用于获取当前浏览器中URL地址栏内的相关数据。
(4)navigator(浏览器对象)：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。
(5)screen(屏幕对象)：可获取与屏幕相关的数据，如屏幕的分辨率、坐标信息等。

二、window对象

1.全局作用域

(1)window对象表示一个浏览器窗口(或一个框架)，所有浏览器的属性和方法，都被定义在 window这个对象之上。
(2)window对象是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。
(3)window对象是全局对象，并且是唯一的，因此在使用中可以省略不写，例如：可以只写 document，而不必写 window.document。同样，可以把 window 对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。

2.弹出对话框和窗口

与open()方法功能相反的是close()方法，用于关闭浏览器窗口，调用该方法的对象就是需要关闭的窗口对象。

3.窗口位置和大小

BOM中用来获取或更改window窗口位置，窗口高度与宽度，文档区域高度与宽度的相关属性和方法有很多。

4.框架操作

window对象提供的frames属性可通过集合的方式，获取HTML页面中所有的框架，length属性就可以获取当前窗口中frames的数量。frames [ ] 框架集：把浏览器窗口分成几个窗框，每个窗框同时取得多个 URL地址，显示不同网页内容。

5.定时器

三、location对象

1.认识URL

在Internet上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL( Uniform Resource Locator，统一资源定位符 )。

在URL中，包含了网络协议、服务器的主机名、端口号、资源名称字符串、参数以及锚点。

2.更改URL

🔷location对象提供的用于改变URL地址的方法，所有主流的浏览器都支持。
🔹reload()方法的唯一参数，是一个布尔类型值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。

3.获取URL参数

Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。

四、histoty对象

1.历史记录跳转

history对象可对用户在浏览器中访问过的URL历史记录进行操作。出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。

window.history.go(1) 前进（跳转）；window.history.go(-1) 后退（跳转）
window.history.forward() 前进；window.history.back() 后退

2.无刷新更改URL地址

pushState()方法会改变浏览器的历史列表中记录的数量。replaceState()方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace()方法的功能类似。

五、navigator对象

navigator对象获取浏览器名称、平台版本信息、是否启用cookie状态、操作系统平台等。

六、screen对象

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。

七、DOM

上一篇 >>> js对象篇
下一篇 >>> DOM 篇