JS BOM 基础摘要

一、什么是BOM

　　BOM：Browser Object Model

　　　　BOM:浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象结构。

　　　　BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

　　　　BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window，其他对象都是该对象的子对象。

 

　　　　常见的对象：

 

 

window	表示浏览器中打开的窗口	重点
location	浏览器当前URL信息	有用
history	用户在浏览器窗口中访问过的 URL	有点用
navigator	浏览器本身信息	很少用
screen	客户端屏幕信息	很少用

 

注：把document对象与BOM分开。

 

二、BOM对象

　　1、window对象

　　　　window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。

　　　　常用的window对象属性：

 

innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
screenY	返回相对于屏幕窗口的y坐标

　　　　常见的window对象方法：

alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。（无限循环）
clearInterval()	取消由 setInterval() 设置的 timeout。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。（延时函数，只执行一次）
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
requestAnimationFrame()	类似于setTimeout()的时间函数
clearAnimationFrame()	取消requestAnimationFrame()

注：最后两对时间函数最重要、用得最频繁，基本页面所有的动态效果都要依赖时间函数。

　　然后，很多时候requestAnimationFrame()比setTimeout()更好一些，为了动画而生，一般不设置时间，它是根据屏幕的刷新率来确定时间，和屏幕的刷新时间一致，能更加友好的契合浏览器，性能更高，动画相关优先考虑，使用方法：

//设置一个开关
let timer； 
function animation1（）{
   console.log("你好")；
   timer = requestAnimationFrame(animation1);
} 
//打印一次过后，延迟一个屏幕刷新率的时间，再次调用打印，再延迟...
//类似于
function animation2（）{
   console.log("你好")；
    setTimeout(animation2,1000);
} 
 //关闭
cancelAnimationFrame(timer);

　　另，JS的特性是：非阻塞异步单线程，alert()、confirm()、prompt()三个弹窗函数是阻塞性的（会卡住，代码不继续执行），对JS不友好，慎用。

　　2、location对象

　　　　

　　　　location对象包含有关当前 URL 的信息。

　　　　常用属性和方法：

　　　　　　　　　　　　window.location.href; 　　　　　　　　　　　　　 获取当前地址栏的地址

　　　　　　　　　　　　window.location.href = “http://www.baidu.com”;　　 设置当前地址栏的地址：跳转

　　　　　　　　　　　　window.location.reload();　　　　　　　　　　　　刷新

　　　　　　　　　　　　window.location.reload(true);　　　　　　　　　　 强制刷新

　　　　　　　　　　　　window.location.assign(url) 　　　　加载 URL 指定的新文档，可以点击后退返回上一个页面。

　　　　　　　　　　　　window.location.replace(url) 　　　　加载 URL 指定的文档来替换当前文档，没有后退返回上一页。

注：可以省略　　window.　　

　　3、history对象

　　　　history 对象包含用户（在浏览器窗口中）访问过的 URL。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

　　　　常用属性和方法：

　　　　　　　　　　　　window.history.length;　　　　返回历史记录中URL的数量

　　　　　　　　　　　　window.history.forword();　　   上一步，前一个 URL

　　　　　　　　　　　　window.history.back();　　　　下一步，下一个 URL

　　　　　　　　　　　　window.history.go(0);　　　　  接收参数 0 表示刷新当前页面

　　　　　　　　　　　　window.history.go(2);　　　　  接收正整数 表示前进2个页面

　　　　　　　　　　　　window.history.go(-2);　　　　 接收负整数 表示后退2个页面

注：可以省略　　window.

　　4、screen对象

　　　　screen对象包含有关客户端显示屏幕的信息。

　　　　常用属性和方法：

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

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

　　　　　　　　　　　　screen.width　　　　　　　　　返回屏幕的总宽度

　　　　　　　　　　　　screen.height　　　　　　　　  返回屏幕的总高度

注：已省略window.

　　5、navigator对象

　　　　navigator对象包含有关浏览器的信息。

　　　　常用属性和方法：

　　　　　　　　　　　　navigator.appName　　　　　　 返回浏览器的名称

　　　　　　　　　　　　navigator.appVersion　　　　　  返回浏览器的平台和版本信息

　　　　　　　　　　　　navigator.platform　　　　　　　返回运行浏览器的操作系统平台

注：已省略window.