BOMBOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了

一、 BOM概念

BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，回退历史记录，获取 url……

二、 BOM 与与 DOM （ Document Object Model ）的关系

1、javacsript 是通过访问 BOM 对象来访问、控制、修改浏览器
2、BOM 的 window 包含了 document，因此通过 window 对象的 document 属性就可以访问、检索、修改文档内容与结构。
3、document 对象又是 DOM 模型的根节点。因此，BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档

三、 BOM 对象包含以下内容

Window JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator包含客户端浏览器的信息。
History 包含了浏览器窗口访问过的 URL。
Location 包含了当前 URL 的信息。
Screen 包含客户端显示屏的信息。

四、Window 对象

Window 对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。

1.window对象属性

窗口位置
window.screenLeft | window.screenX  //浏览器窗口相对于屏幕左边的距离
window.screenTop  | window.screenY  //浏览器窗口相对于屏幕上方的距离
窗口大小
window.outerHeight //返回浏览器窗口本身高度
window.outerWidth //返回浏览器窗口本身宽度
文档显示区大小
window.innerheight  //返回窗口的文档显示区的高度。
window.innerwidth   //返回窗口的文档显示区的宽度。
文档显示区位置
window.pageXOffset	//设置或返回当前页面相对于窗口显示区左上角的 X偏移量。
window.pageYOffset	//设置或返回当前页面相对于窗口显示区左上角的 Y偏移量。

<style>
    body {
        height: 3000px;
    }

    div {
        position: absolute;
        top: 1500px;
        height: 200px;
        width: 200px;
        background-color: red;
    }
</style>

<body>
    <div style="opacity:0.3"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        function check(e) {
            if (div.offsetTop <= window.innerHeight + window.pageYOffset) {
                console.log(window.pageYOffset);//滚动条Y方向偏移量
                console.log(window.innerHeight);//可视区窗口高度
                //可视区高度+滚动条滚动距离>div距离文档顶部距离时，设置定时器
                div.timer = setInterval(function () {
                    if (div.style.opacity == 1) {
                        clearInterval(div.timer);
                    } else {
                        div.style.opacity = parseFloat(div.style.opacity) + 0.01;

                    }
                }, 30)
            }
        }
        window.onscroll = function () {
            console.log('safa')
            check(div)  //滚动滚动条时，触发check函数，将div传参进去，监控div的状态。
        }

2.window对象方法

2.1 弹出对话框

alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。

2.2 间歇调用&超时调用

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout
clearTimeout() 取消由 setTimeout() 方法设置的 timeout
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace）
scrollBy()按照指定的像素值来滚动内容。
scrollTo()把内容滚动到指定的坐标。

五、Navigator对象

// Navigator 对象
// userAgent 做浏览器嗅探
// onLine 判断是否脱机 （有没有网络）
// cookieEnabled判断是否能使用cookie

六、History对象

history.length //返回浏览器历史列表的URL数量
history.back()//加载 history 列表中的前一个 URL
histoty.forward()//加载 history 列表中的下一个 URL。
history.go(3)//往前加载history列表第三URL

七、Location对象

hash: "" //#号后面的字符
host: "juejin.im" //服务器名称和端口号
hostname: "juejin.im" //不带端口的服务器
href: "https://juejin.im/editor/drafts/5cd19f97e51d456e5238ca57"//完整URL
origin: "https://juejin.cn" //协议+域名
pathname: "/editor/drafts/5cd19f97e51d456e5238ca57"//路径
port: "" //端口
protocol: "https:"//协议

BOM