BOM

1.BOM BOM(Browser Object Model ) 是浏览器对象模型

2.window对象是一个全局对象，也可以说是JavaScript中的顶级对象  像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

4.window对象下的属性和方法调用的时候可以省略window

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：通过 userAgent 检测浏览器的版本及平台

 <script>
     !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    }())
  </script>

location对象

location 的数据类型是对象,是地址栏对象
常用属性和方法： search 属性获取地址中携带的参数，符号？后面部分

<body>

  <form action="">
    <input type="text" name="wode">
    <input type="password" name="nide">
    <button>提交</button>
    <!-- location.search   得到你输入的内容-->
  </form>
  <!-- location.hash -->
  <a href="#/my">我的</a>my
  <a href="#/friend">关注</a>
  <a href="#/download">下载</a>
  <!--得到的是 my friend download -->
  <button>刷新</button>
  <script>
    console.log(location); //当前浏览器地址
    // 属性
    // href属性获取完整的URL地址,对其赋值时用于地址的跳转
    console.log(location.href); //利用js的方法去跳转页面
    location.href = 'http://www.baidu.com'
    // search属性获取地址携带的参数,符号?后面的
    // hash属性中获取地址中的哈希值,符号#后面的
    // reload方法用来刷新当前页面,传入参数true表示强制刷新
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // Ctrl+f5 强制刷新页面
      location.reload(true)
    })
    location.assign('url') //加载指定的地址
    // 会产生历史记录
    location.replace(url) //替换现在的地址
    // 不会产生历史记录
  </script>
</body>

histroy对象

history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：

<body>
  <button>前进</button>
  <button>后退</button>
  <!-- history对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进后退,历史记录等 -->
  <script>
    const back = document.querySelector('button:first-child')
    const forward = back.nextElementSibling
    back.addEventListener('click', function () {
      // history.back()//后退
      history.go(1)

    })
    forward.addEventListener('click', function () {
      // history.forward()//前进
      history.go(-1)
    })
  </script>

BOM对象及属性方法

BOM

navigator对象

location对象

histroy对象