2023-5-16（第十天）

BOM

全称： 浏览器对象模型（Browser Object Model）

作用： 专门用于操作浏览器，但是使用的不多，浏览器很多操作都是自带的

特殊： BOM没有标准，大部分浏览器都是一直规范的，除了老IE（8以上）

window对象

角色

• 代替全局对象global：保存全局变量和全局函数
• 指代当前窗口本身

属性

• 获取浏览器的完整大小

  outerWidth/outerHeight;
  

• 获取浏览器的文档显示区域的大小

  innerWidth/innerHeight
  

• 获取屏幕的完整大小

  screen.width/height
  

方法

• 打开链接的新方式

  //1.当前窗口打开，可以后退
  open("url","_self");
  ​
  //2.当前窗口打开，禁止后退
  location.replace("新url")
  ​
  //3.新窗口打开，可以打开多个
  open("url","_blank")
  ​
  //4.新窗口打开，只能打开一个
  open("url","自定义一个name")
  

• a标签的其他用途

  //1.下载
  <a href="xx.exe/rar/zip/7z..."></a>
  ​
  //2.打开图片或txt文件
  <a href="xx.图片后缀/txt"></a>
  ​
  //3.直接书写JS，不需要绑定点击事件
  <a href="javascript:js代码"></a>
  

• 打开新窗口/新链接

  let newW=open("url","target","width= ,height= ,left= ,right= ")
  

• 关闭窗口

  window.newW.close()
  

• 改变新窗口的大小

  newW=resizeTo(新宽，新高)
  

• 改变新窗口的位置

  newW=moveTo(新x,新y)
  

• window提供的三个框

  • 警告框：alert("警告文字")
  • 输入框：prompt("提示文字")
  • 确认框：confirm("提示文字")

• window的专属事件

  • 加载

    window.onload=callback;
    
    //等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码最后才会执行
    

  • 窗口大小改变

    window.onresize=callback;
    
    //窗口大小发生改变就会触发，搭配上判断innerWidth可以理解为JS版本的CSS媒体查询
    

  • 滚动事件

    window.onscroll=callback;
    
    //拓展：1.获取滚动条当前的位置
    window.scrollY;
    
    //2.获取元素距离页面顶部有多远
    elem.offsetTop/offsetLeft;
    

本地/客户端存储技术webStorage

会话级存储sessionStorage

只要浏览器一旦关闭，数据就会被清空

本地级存储localStorage

只要不主动清空，数据永久存在

操作

//1.添加
xxxxStorage.属性名="属性值";

//2.读取
xxxxStorage.属性名;

//3.删除
xxxxStorage.removeItem("属性名");

//4.清空
xxxxStorage.clear();