BOM

Browser Object Model 浏览器对象模型

浏览器提供的一套操作浏览器窗口的属性和方法

BOM 的顶级对象是 window，定义的变量都在这个环境下

是一个对象, 当你打开一个页面的时候就有一个 window

所有和 BOM 相关的 API 都是 window.xxx

JS 代码书写的时候, 可以不写 window.

浏览器窗口尺寸

  指的是 浏览器 可视窗口的尺寸

浏览器有可能会出现滚动条

浏览器滚动条时算浏览器的一部分的

  在 MAC 电脑 上, 是不算的

      两个属性

          1. innerWidth

          2. innerHeight

       共同点: 包含滚动条的尺寸

console.log(window.innerWidth)console.log(window.innerHeight)// 可以省略 window 不写console.log(innerWidth)console.log(innerHeight)

 浏览器的弹出层

     再 BOM 里面, 给我们提供了三个弹出层

        可以再浏览器弹出一些信息

          1. alert()  警告框

            弹出一段提示文本

            只有一个确定按钮

          2. confirm()  选择框

            弹出一段提示文本

            有确定和取消两个按钮

          3. prompt()  输入框

        弹出一个提示文本

          有一个 input 输入框

          有确定和取消按钮

 使用方法:

        1. alert(): window.alert('提示文本')

          返回值: undefined

        2. confirm(): window.confirm('提示文本')

          返回值: 布尔值

          当用户点击确定的时候, 是 true

          当用户点击取消的 hi 收, 是 false

        3. prompt(): window.prompt('提示文本')

          返回值:

            如果用户点击确定, 那么就是文本框里面的内容

          如果用户点击取消, 那么就是 null

var res = window.alert('这是一段提示文本')console.log(res)   var res = window.confirm('请选择')console.log(res)  var res = window.prompt('请输入一段文本')   console.log(res)

 相同点:

       会阻执行的程序

      JS 是单线程操作

       弹出层弹出以后, 如果用户没有点击按钮表示当前弹出层没有结束

    直到用户操作以后, 才会继续向下执行代码

 浏览器的地址栏(重点)

      一个地址包含哪些内容

      http://www.guoxiang.com?a=100&b=200#abc

          http 传输协议

          www.guoxiang.com   域名

          ?a=100&b=200    查询字符串(queryString)

        #abc  哈希(hash)

        window 下有个成员叫做 location

      location 是一个对象, 里面存储着和网页地址所有内容相关的信息

          hash: 当前页面的 hash 值

          href: 是一个读写的属性(当前地址栏地址)

            读: 获取当前打开的页面的地址(中文是 url 编码格式)

            写: 设置当前打开的页面的地址(跳转页面)

        search: 当前地址中的 查询字符串(queryString)

            读: 查询到的是一个字符串

            这个是其他页面跳转到当前页面的时候带来的信息

          reload()方法

      重新加载当前页面 等于点击刷新按钮

        注意: **不能写在打开页面就能执行的地方**

浏览器卷去的高度和宽度

      当页面比窗口宽或者高的时候，

有一部分是随着滚动条的拖动会隐藏部分网页

    上面隐藏的叫做 卷去的高度

    左边隐藏的叫做 卷去的宽度

使用方法

1. document.documentElement.scrollTop

 2. document.body.scrollTop

        使用必须要没有 DOCTYPE 标签

获取卷去的宽度:

        1. document.documentElement.scrollLeft

      2. document.body.scrollLeft

          使用必须没有 DOCTYPE 标签

        3. 兼容的写法

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

 浏览器滚动到

        通过 JS 代码指定 浏览器滚动到什么位置

1. scrollTo()

        使用方法: window.scrollTo({

              top: 纵向坐标,

              left: 横向坐标,

            })

         对象里面写几个值无所谓

          特点: 可以依靠第三个配置项来决定是瞬间定位还是平滑滚动

              behavior: 'smooth', 'instant'

            缺点：不能决定滚动时间

今天是周六所以写作心情不是很高涨，但是还是写完了 ，明天开始写 DOM