Js中的浏览器 BOM

js分为三部分：

      1.ECMAScript 语法标准。

      2.BOM 操作浏览器部分功能。

      3.DOM 操作网页上的元素。

      【注意】

      1.DOM是BOM的一部分。

      2.window对象是BOM的顶层对象。所有的BOM对象都是通过window对象延伸出来的，也可以成为window的子对象。

      什么是BOM？

        即：Browser object model 浏览器对象模型。

      常见的BOM对象：

        window：代表的是整个浏览器窗口

        Navigator：当前浏览器的信息。 使用的什么浏览器，内核，浏览器的版本。 不常见。

        Location：浏览器中的地址栏信息。

        History：历史记录。

        Screen：用户的屏幕信息 。

window 常用的方法

      alert();弹出窗口

      prompt()

      setInterval() 设置定时器。

      clearInterval（）清除定时器

      console 控制台对象。

     window.open()  打开一个新窗口

       window.open("打开的网址"，打开的位置)

       打开的位置：

        _blank 新标签页打开

        _self 本身页面打开。

        _parent 父窗口。

      window.close() 关闭当前页面

     window.onlond() 页面加载完成后执行传入的函数。

    在JS中所有的方法调用都是通过： 对象名.方法名(); 

    我们自定义的函数，其实都是定义在window对象中，调用的时候，可以省略window对象名不 写。

location 浏览器地址栏。

    一个完整的URL应该包含哪些内容：

    1.传输协议： http  https（安全的协议，需要用证书）

    2.域名  s.taobao.com

    3.网页地址 /search 

    4.查询字符串（参数） q=男士风衣 键值对 q键  男士风衣 值  浏览器传给服务器的信息。

    5.#123  哈希（hash） 锚点

    location:

      hash：当前页面的hash值。

      href：当前地址栏中的地址。 重点

          读：location.href 返回的是当前页面的地址。

          写：location.href = "写在地址栏中的地址"（跳转页面）

      search: 

        获取当前地址栏中的查询字符串.

 navigator 浏览器信息  

        userAgent 浏览器的版本以及型号信息。

        appName 所有的浏览器都是一样的，都是Netscape

        platform 显示浏览器所在的系统

history 历史记录对象

    每个浏览器窗口都有自己的history对象。

    常用方法：

      history.back(); 后退一页  相当于浏览器 ←

      history.forward(); 前进一页 相当于浏览器 →

      history.go(n)

        n表示一个数字。

          正整数 表示前进n页

          0    表示刷新当前页面。

          负整数 表示后退n页

    属性：

      length：history对象中历史记录数。

        

    【注意】

    1.后退的时候，需要有历史记录才可以后退

    2.前进的时候，必须后退过才可以前进。

获取浏览器窗口的尺寸：

      innerWidth 获取宽

      innerHeight 获取高

      可视区域，包含滚动条

    卷去的高度和宽度

      当页面比窗口宽或者高的时候，会有一部分内容随页面滚动而隐藏，上面隐藏的高度被称为 卷去的高度  左面隐藏的宽度被称为 卷去的宽度。

      卷去的高度：

        页面必须要有DOCTYPE标签。

        document.documentElement.scrollTop

        页面必须没有DOCTYPE标签。

        document.body.scrollTop

      卷去的宽度

        页面必须要有DOCTYPE标签。

        document.documentElement.scrollLeft

        页面必须没有DOCTYPE标签。

        document.body.scrollLeft

      兼容写法：

        var scrTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

scrollTo()方法：

      滚动到指定位置。

      格式：

        1.scrollTo(横坐标，纵坐标)

          1.1 不需要书写单位

          1.2 两个参数必须写全

        2.scrollTo({top: 纵坐标， left:横坐标,behavior:"smooth"  })

          behavior:"smooth" 

        //用来决定定位的方式是瞬间定位还是平滑定位  瞬间定位 instant  平滑定位 smooth。

       

窗口的滚动事件

      window.onscroll = 函数；（一般来说，都是写一个匿名函数。）

      表示当窗口滚动的时候，会执行函数。