浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。

1.Window 对象

• 所有浏览器都支持 window 对象。它表示浏览器窗口。
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• 甚至 HTML DOM 的 document 也是 window 对象的属性之一：

  window.document.getElementById("header");

  与此相同：

  document.getElementById("header");

  1、screen对象

1. Screen 对象包含有关客户端显示屏幕的信息。
2. 注意： 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

   Screen 对象属性

   | 属性 | 说明 | | :—- | :—- | | availHeight | 返回屏幕的高度（不包括Windows任务栏） | | availWidth | 返回屏幕的宽度（不包括Windows任务栏） | | colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 | | height | 返回屏幕的总高度 | | pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） | | width | 返回屏幕的总宽度 |

        var screenWidth = window.screen.availWidth;
        var screenHeight = window.screen.availHeight;
        console.log(screenWidth)
        console.log(screenHeight)

2、Navigator 对象

1. Navigator 对象包含有关浏览器的信息。
2. 注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

   Navigator 对象属性

   | 属性 | 说明 | | :—- | :—- | | appCodeName | 返回浏览器的代码名 | | appName | 返回浏览器的名称 | | appVersion | 返回浏览器的平台和版本信息 | | cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 | | platform | 返回运行浏览器的操作系统平台 | | userAgent | 返回由客户机发送服务器的user-agent 头部的值 |

Navigator 对象方法

3、Location对象

1. Location 对象包含有关当前 URL 的信息。
2. Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
3. 注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

   Location 对象属性

   | 属性 | 描述 | | :—- | :—- | | hash | 返回一个URL的锚部分 | | host | 返回一个URL的主机名和端口 | | hostname | 返回URL的主机名 | | href | 返回完整的URL | | pathname | 返回的URL路径名。 | | port | 返回一个URL服务器使用的端口号 | | protocol | 返回一个URL协议 | | search | 返回一个URL的查询部分 |

Location 对象方法

    <button id="btn">跳转到百度</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick =  function(){
           console.log(location.href='http://www.baidu.com')
        }
    </script>

4、history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

History 对象方法

    <input type="button" value="Back" onclick="goBack">
    <input type="button" value="Forward" onclick="goForward">
    <script>
        function goBack(){
            window.history.back()
        }
        function goForward(){
            window.history.forward()
        }
    </script>

事件