BOM

水深无声 2021-09-07 06:12 402阅读 0赞

### BOM ###

*  一、什么是BOM
 *  二、window的组成
 *  三、windwo的事件
 *   *  1.窗口加载事件
     *  2.浏览器窗口变化事件
 *  四、location对象
 *   *  1.location.href
     *  2.locaion.host
     *  3.location.port
     *  4.location.pathname
     *  5.location.search
     *  6.location.hash
     *  7.location对象的方法
 *  五、navigator对象
 *   *  1.userAgent
 *  六、history对象
 *   *  1.history.back()
     *  2.history.forward()
     *  3.history.go()

# 一、什么是BOM #

浏览器对象模型，独立于内容而与浏览器窗口进行交互的对象，其核心对象是window  
BOM是浏览器厂商自己定义的。兼容性较差。  
BOM包含DOM，DOM的顶级对象是document  
window是js操作浏览器的一个接口  
window是一个全局对象，定义在全局中的变量和函数都会变成windwo对象的属性和方法。  
console.dir(window)查看window的对象

# 二、window的组成 #

1.document  
2.location  
3.navigation  
4.screen  
5.history  
…

# 三、windwo的事件 #

## 1.窗口加载事件 ##

window.onload = function(){ 
    //表示在文档内容全部加载完成后才会触发的事件，文档内容包括图像，脚本文件，CSS文件等。
    }
    //或者
    window.addEventListener('load',function(){ 
    //同上
    })
    
    document.addEventListener('DOMContentLoaded',function(){ 
       //仅当DOM加载完成时触发，不包括样式不，图片和false，ie9以上支持，执行速度比上面两个块
    })

window.onload 加载事件只能写一个，写多个以最后的事件为准。  
addEventListener则没有限制，可以写多个，都会生效。

## 2.浏览器窗口变化事件 ##

window.onresize =function(){ 
      //浏览器窗口发生变化就会触发
    }
    //或者
    window.addEventListener('resize',function(){ 
    
    })

获取当前浏览器的宽度/高度，window.innerWidth/innnerHright

# 四、location对象 #

location主要来处理url  
url:http://www.baidu.com:80/index?name=fei&age=18\#id  
http:// 是通信协议  
www.baidu.com 是主机（域名）  
:80 是端口  
index 是路径  
name=fei&age=18 是参数  
\#id 是锚点

## 1.location.href ##

获取或设置整个URL，设置之后会自动跳转到指定页面。

## 2.locaion.host ##

返回主机/域名

## 3.location.port ##

返回端口

## 4.location.pathname ##

返回路径

## 5.location.search ##

返回参数

## 6.location.hash ##

返回片段，\#后面的内容