BOM的介绍与应用

BOM的介绍与使用以及它们之间的关系

什么是bom

BOM(Browser object Model)浏览器对象模型

bom的对象有6种，分别是：

window

navigator

location

screen

history

document

window对象

打开

【案例】

<input type="button" value="打开" id="btn"/>

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            //第一个参数是地址URL
            //第二个参数打开位置  _self在当前页面打开    _blank在新窗口打开（默认）
            window.open("http://www.baidu.com" , "_blank")
        }
    </script>

关闭(只能关闭程序打开的窗口)

【案例】

<input type="button" value="关闭" id="btn"/>

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            //只能关闭程序打开的窗口
            window.close();
        }
    </script>

navigator对象

navigator.userAgent(用来描述一些浏览器的版本信息)

【案例】不同浏览器不同背景色

<script>
    var ua = navigator.userAgent;
    //console.log(ua);
    var res = ua.match(/Chrome|Firefox|Trident/i);
    //console.log(res);
    //console.log(res[0]);
    switch(res[0]){
        //火狐
        case "Firefox" :{
            document.body.bgColor = "red";
            break;
        }
        //谷歌
        case "Chrome" :{
            document.body.bgColor = "blue";
            break;
        }
        //IE
        case "Trident" :{
            document.body.bgColor = "green";
            break;
        }
    }
</script>

location(地址、位置)对象

location属性有

hostname主机名

href当前网页的地址

pathname具体文件路劲

hash 以#打头的那段为哈希值

location方法

reload 从新加载当前页面（刷新）

【重新加载案例】

<input type="button" value="重新加载" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        //类似于f5
        location.reload();
        //不使用本地缓存，强制刷新（类似于Ctrl+f5）,默认是false
        location.reload(true);
    }
</script>

【页面跳转案例】

<input type="button" value="百度" id="btn1">
<script>
    var btn1 = document.getElementById("btn1");
    //页面跳转
    btn1.onclick = function(){
        //两种
        location.href ="http://www.baidu.com" ;
        //window.open("http://www.baidu.com" , "_self")
    }
</script>

【哈希hash案例】

<input type="button" value="哈希" id="btn2">
<script>
    var btn2 = document.getElementById("btn2");
    //哈希
    btn2.onclick = function(){
       location.hash = "abc";
    }
</script>

screen(屏幕)对象

【检测屏幕大小示例】

不一样屏幕下样式不同
<script>
    var lin = document.getElementById("link1");
   var aw = screen.availWidth;
   console.log(aw);
   switch (aw){
       case 1366 :{
            lin.href = "style.css";
            break;
       }
       case 1360 :{
            lin.href = "style1.css";
            break;
       }
       case 1280 :{
            lin.href = "style2.css";
            break;
       }
       case 1024 :{
            lin.href = "style3.css";
            break;
       }
       case 800 :{
            lin.href = "style4.css";
            break;
       }
   }
</script>

history(历史)对象

【返回前进示例】

<a id="fanhui">返回</a>
<a id="qianjin">前进</a>
<script>
    var fh = document.getElementById("fanhui");
    var qj = document.getElementById("qianjin");
    //返回
    fh.onclick = function(){
        history.back();
    }
    //前进
    qj.onclick = function(){
        history.forward();
    }
</script>

history方法

history.pushState(数据,'','地址可不写')

【示例】

<div id="suijishu"></div>
<input type="button" value="机选一注" id="btn3"></br>
<script>
    var btn3 = document.getElementById("btn3");
    var suijishu = document.getElementById("suijishu");
    var i = 0;
    //机选一注
    btn3.onclick = function(){
        var jieguo = suiji(6);
        history.pushState(jieguo,'','');
        suijishu.innerHTML = jieguo;
    }

    function suiji(n){
        var res = [];
        for(var i = 0; i<n ; i++){
            //产生随机数
            res.push(Math.ceil(Math.random()*36));
        }
        return res.join(",")
    }
    //当哈希值改变的时候执行
    window.onpopstate = function(e){
        var aaa=  e.state;
        suijishu.innerHTML = aaa;
    }
</script>

document(文档)对象

title属性

write方法（将文档的内容替换成新内容）

bom对象之间的关系

window下面的5个对象都是window对象的儿子

navigator

location

screen

history

document

以上就是BOM的介绍与应用