javascript-BOM

时间 2019-12-07
原文原文链接
BOM是 Brower Object Model 浏览器对象模型,操做浏览器部分功能的API,如前进,后退,刷新,滚动BOM结构图:从上图也能够看出：window对象是BOM的顶层(核心)对象，全部对象都是经过它延伸出来的，也能够称为window的子对象。DOM是BOM的一部分。window对象：window对象是JavaScript中的顶级对象。全局变量、自定义函数也是window对象的属性和方法。window对象下的属性和方法调用时，能够省略window。一.弹出系统对话框    alert('')是window.alert('')的简写,由于它是window的子方法二.打开窗口,关闭窗口    1.打开窗口语法:window.open('url','target')        url:要打开的地址        target:打开新窗口的位置能够是_blank,_self,_parent    2.关闭窗口语法:window.close()        注:关闭的是当前窗口,并非打开的新窗口        例:三秒以后打开百度,五秒后关闭            <body>            <script>                setTimeout(function(){                    window.open('http://www.baidu.com','_self')                },3000);                setTimeout(function(){                    window.close()                },5000);            </script>            </body>    3.location对象图        (1)location.href  跳转            例:点击盒子进行跳转                <head>                    <meta charset="UTF-8">                    <title>Title</title>                    <style>                        div{                            width: 100px;                            height: 100px;                                                    }                    </style>                </head>                <body>                <div id="box">fgdfg</div>                <script>                    var oDiv=document.getElementById('box');                    oDiv.onclick=function(){                        location.href='http://www.baidu.com';                    }                </script>                </body>        (2)location.reload()  从新加载            例:两秒钟以后从新加载页面                <body>                <div id="box">fgdfg</div>                <script>                    setTimeout(function(){                        window.location.reload();                    },2000);                </script>                </body>    4.navigator对象        userAgent:系统浏,览器,用来判断用户所使用的设备,系统等,不一样的设备渲染出的页面不一样        platform:浏览器支持的系统  win/mac/linux            例:                <body>                <div id="box">fgdfg</div>                <script>                    console.log(                        window.navigator                    )                </script>                </body>    5.history对象        (1)后退：            history.back()            history.go(-1)：0是刷新        (2)前进：            history.forward()            history.go(1)            用的很少。由于浏览器中已经自带了这些功能的按钮：