BOM 浏览器对象模型

Bom 浏览器对象模型，全称呢（Browser Object Model）

提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

window主要内容  document history navigator 定时器 本地存储 alert  prompt ...

div class="box"></div>
<script>

console.log(window)
      console.log(window.document.querySelector('.box'))
      // alert()  propmt()
      //window.alert('ok')
      //alert('ok')
      console.log(window)
</script>

var 定义变量时会挂载到window上

console.log(window)
      var a = 100
      console.log(a)//100
      console.log(window.a === a)//true

let const 不会挂载到window上

window.onload = function(){} ; 

当页面内容完全加载完成之后会触发该事件(含图像,脚本文件,css,文件等),就调用的处理函数

传统注册事件方式,只能写一次,若有多个,以最后一个 window.onload 为准,前边的都会被覆盖

const btn = document.querySelector('button')
 btn.addEventListener('click', function () {
        alert('秋香')
       })
 
btn.addEventListener('mouseenter', function () {
         alert('鼠标移入')
       })
 
       btn.addEventListener('mouseleave', function () {
         alert('鼠标移出')
       })
      
      // 双击
      btn.addEventListener('dblclick', function () {
       console.log('双击')

.addEventListener

window.addEventListener("load",function(){}); 

不会被覆盖,多个也可生效,无限制

setTimeout  设置一个定时器,在定时器到期后执行调用函数

.setTimeout(调用函数,[延迟的毫秒数])

.setInterval    间隔时间,就反复调用一次回调函数

.setInterval(回调函数, [间隔的毫秒数]);

let timerId = window.setTimeout(function () {
            console.log('执行一次')
        }, 1000)
        console.log(timerId)//1
        clearTimeout(timerId)

 const box = document.querySelector('.box')
       box.children[1].addEventListener('click', function () {
           box.style.display = 'none'
       })
       setTimeout(function () {
        box.children[1].click()
      }, 3000)

location对象指示了其所连接对象的url位置

location.href // 完整地址

location.search//查询参数   返回url中?以及之后的字符串

location.hash//  哈希值 返回url中代表页面某个区域的带有#的字符串

location.reload(true) // true 强制刷新

navigator 与 浏览器相关的信息

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent该属性可以返回由客户机发送服务器的 user-agent 头部的值

navigator.userAgent //记录了浏览器的版本与平台

正则表达式是用于匹配字符串中字符组合的

正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法

window.history属性指向 History 对象，它表示当前窗口的浏览历史

History.forward()：

移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。

History.go()：

接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面

本地存储->数据持久化 特点 存储一些5M以内的不同浏览器存储空间不一  例如简单高频使用的数据(字符串)

localStorage 永久存储

取

localStorage.getItem('')

删

localStorage.removeItem('')

 sessionStorage 会话级别存储 关闭浏览器删除

取

sessionStorage.getItem('username')

删

 sessionStorage.removeItem('username')

localStorage.setItem('zhaoman', obj) // 不能直接存储引用类型 '[object Object]'
      // console.log(typeof localStorage.getItem('zhaoman'))

      //
      console.log(JSON.stringify(obj)) // 字符串形式的对象
      // 对象->字符串
      localStorage.setItem('zhaoman', JSON.stringify(obj))
      // JSON.parse() 字符串->对象
      console.log(JSON.parse(localStorage.getItem('zhaoman')))