JavaScript中Bom理解

一、    什么是BOM

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

核心对象是window

 

DOM	BOM
文档对象模型	浏览器对象模型
文档作为一个对象	浏览器作为一个对象
顶级对象 document	顶级对象 window
操作页面元素	浏览器窗口交互

 

二、    BOM的构成

1. js访问浏览器窗口的一个接口
2. 一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

调用时可以省略window  

例：对话框属于window方法

   Alert()   prompt()等

 

三、    窗口加载事件

window.onload = function ( ) { }

或者  window.addEventListener (“load”, function ( ) {  } );

 

注：window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件

 

window.onload注册事件方式只能写一次，如有多个，以最后一个为准

***使用addEventListener没有限制

 

四、调整窗口大小事件

   window.onresize = function ( ) { }

或者  window.addEventListener (“resize”, function ( ) {  } );

 

  Window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

  注：1.只要窗口大小发生像素变化，就会触发这个事件

      2.window.innerwidth   当前屏幕的宽度

        Window.innerheight  当前屏幕的高度

 

五、定时器

   1.两种定时器

      setTimeout( )        setInterval( )

2.setTimeout( )定时器

  window.setTimeout(调用函数，【延迟的毫秒数】)；

 

setTimeout( )方法用于设置一个定时器，该定时器在到期后执行调用函数

调用函数可以直接写函数，也可以写函数名

 

注：window可以省略

这个调用函数可以直接写函数，或者写函数名，或者采取字符串

 

3.停止定时器

  Window.clearTimeout (timeout ID)

 

4.setInterval 定时器

   Window.setInterval (回调函数，【间隔的毫秒数】)；

  SetInterval ( )方法反复调用一个函数，每隔这个时间，就去调用一次回调函数

 

六、location 对象

   Location属性用于获取或设置窗体的URL，并且可以用于解析URL

 

快速搞懂URL的构成 - 简书 (jianshu.com) ——此处来源于简书

 

Location对象属性	返回值
Location.href	获取/设置整个URL
Location.host	返回主机（域名）
Location.port	返回端口号
Location.pathname	返回路径
Location.search	返回参数
Location.hash	返回片段

 

 

Location对象方法	返回值
Location.assign( )	同href,可跳转页面
Location.replace( )	替换当前页面
Location.reload( )	重新加载当前页面，相当于刷新 参数为true,强制刷新

七、navigator对象

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

常用userAgent属性：返回由客户机发送服务器的user-agent头部值

 

八、history对象

   与浏览器历史记录进行交互

 

History对象方法	作用
Back( )	后退功能
Forward( )	前进功能
Go(参数)	前进后退功能   参数是1，前进一个页面 参数是-1，后退一个界面