带你走进从零认识JavaScript到精髓（十二）JavaScript的BOM对象认识

2022-06-11 11:26:15

一、BOM对象

1.1 浏览器对象模型（BOM）

BOM：Browser Object Model，浏览器对象模型。

JS操作的网页文档，是在浏览器中打开的，所以针对浏览器对象作为主要模型的操作是JS中重要的一个组成部分。BOM操作

BOM是基于浏览器窗口的一个处理对象，可以处理浏览器窗口相关的一些事情，如：浏览器历史数据、浏览器本地跳转、浏览器屏幕尺寸、新打开窗口、滚动条滚动等等操作

1.2window 对象——BOM核心

window，顾名思义，窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。同时， window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

所有浏览器都支持 window 对象。它表示浏览器窗口；
概念上讲：一个html文档对应一个window对象；
功能上讲：控制浏览器窗口的；
使用上讲：window对象不需要创建对象，直接使用即可；
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员；
全局变量是 window 对象的属性。全局函数是 window 对象的方法。

常见API

函数名称	描述
alert(“提示信息”)	警告对话框
confirm(“确认信息”)	确认对话框
prompt(“弹出输入框”)	交互对话框
setInterval(函数，时间)	定时器函数，无限执行
setTimeout(函数，时间)	延时器函数，只执行一次
clearInterval()	清除定时器，用于停止执行setTimeout()方法的函数代码
clearTimeout()	清除延时器清除定时器，用于停止执行setTimeout()方法的函数代码
close()	关闭当前网页
open(“url地址”，“_black或_self”，“新窗口的大小”)	打开网页
innerHeight	属性，浏览器可视区域高度
innerWidth	属性，浏览器可视区域宽度

间歇调用setInterval() 和清除间歇调用clearInterval()

// 每隔一段时间就执行一次相应函数 -- 间歇调用
let timer = setInterval(function(){
    alert("Hello World!")
}, 3000);
// 取消setInterval设置；语法：clearInterval(setinterval的返回值);
clearInterval(timer); // 清除间歇调用

延时调用setTimeout() 和清除延时调用clearTimeout()

var ID = setTimeout(f,2000);  // 只调用一次对应函数
function f() {
    alert('Hello world！');
}
// clearTimeout(ID);  触发什么行为后再执行着这句

Cookies 用于存储 web 页面的用户信息。

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookies。document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

1.3 document 对象

它是window对象的一个属性，可以用来处理页面文档

下节详细分析DOM对象

1.4 location 对象

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

获取部分页面属性
console.log(location.hostname); // 获取打开文件主机名称 console.log(location.pathname); // 获取打开文件的路径描述 console.log(location.port); // 获取打开文件的网络端口 console.log(location.protocol); // 获取打开文件的协议名称 console.log(location.href); // 获取打开文件的url

1.5 navigator 对象

对象提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断。

window.navigator 对象在编写时可不使用 window 这个前缀。

获取浏览器信息
console.log(navigator.appCodeName); //浏览器代号 Mozilla console.log(navigator.appName); // 浏览器名称 Netscape console.log(navigator.appVersion); // 浏览器版本 5.0 console.log(navigator.cookieEnabled); //启用cookie操作 true console.log(navigator.platform); //硬件平台 win32 console.log(navigator.userAgent); //用户代理 Mozilla/5.0… console.log(navigator.systemLanguage); // 语言环境 zh-CN
备注：了解即可！开发中不适用！

获取浏览器信息

console.log(navigator.appCodeName); //浏览器代号 Mozilla
console.log(navigator.appName); // 浏览器名称 Netscape
console.log(navigator.appVersion); // 浏览器版本 5.0
console.log(navigator.cookieEnabled); //启用cookie操作 true
console.log(navigator.platform); //硬件平台 win32
console.log(navigator.userAgent); //用户代理 Mozilla/5.0…
console.log(navigator.systemLanguage); // 语言环境 zh-CN

备注：了解即可！开发中不适用！

1.6 screen 对象

主要用来获取用户的屏幕信息。

window.screen对象在编写时可以不使用 window 这个前缀

screen.height: 获取整个屏幕的高。

screen.width : 获取整个屏幕的宽。

screen.availHeight: 整个屏幕的高减去系统部件的高（可用的屏幕宽度）

screen.availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度）

1.7 history 对象

对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

back() 返回上一页。

forward() 返回下一页。

go(“参数”) -1表示上一页，1表示下一页。

总结

以上就是今天带你走进从零认识JavaScript到精髓（十二）JavaScript的BOM对象认识
会持续更新中…
原创不易，期待您的点赞关注与转发评论

码农公寓