JS 浏览器对象模型BOM与文档对象模型DOM

目录

浏览器对象模型BOM(Brower Object Model)

（1） window

（2）screen

（3）location

（4）history 

（5）Navigator

（6）BOM其他

---

浏览器对象模型BOM(Brower Object Model)

BOM主要提供一系列与浏览器相关的信息，主要包含以下对象：

window

screen

location

history

navigator

（1） window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

window对象的通用属性和方法：

• window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
• window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
• document.body.clientHeight - 浏览器窗口的内部高度(包括滚动条)
• document.body.clientWidth- 浏览器窗口的内部宽度(包括滚动条)
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

（2）screen

screen对象的通用属性和方法：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

注意：

screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

（3）location

location对象的通用属性和方法:

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http: 或 https:）
• location.href 属性返回当前页面的 URL。
• location.assign() 方法加载新的文档。
• location.search 返回URL的查询字符串，字符串以问号开头 

以下是通过location实现页面跳转的三种方式：

//加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.assign("https://www.baidu.com")
 
//直接改变当前页面的url来实现跳转，也可以点击后退返回到上一个页面
window.location.href = "https://www.baidu.com"
 
// 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
window.location.replace("https://www.baidu.com")
 

（4）history 

history对象的通用属性和方法:

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击向前按钮相同
• history.go()-也能实现页面的前进和后退

history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
history.go(0);  // go() 里面的参数为0,表示刷新页面

（5）Navigator

window.navigator 对象包含有关访问者浏览器的信息。

history对象的通用属性和方法:

• navigator.appCodeName -- 浏览器代号
• navigator.appName -- 浏览器名称
• navigator.appVersion -- 浏览器版本
• navigator.cookieEnabled -- Cookies
• navigator.platform -- 硬件平台
• navigator.userAgent -- 用户代理语言
• navigator.language  -- 用户代理

（6）BOM其他

BOM其他相关的属性和方法：

• alert()-- 警告框
• confirm() -- 确认框
• prompt() -- 提示框
• setTimeOut()、setInterval() -- 定时器
• clearTimeout()、clearInterval() -- 清除定时器
• cookie -- 记录用户信息