学习JavaScript Bom(文档对象模型)

一.Bom 是什么？

DOM（文档对象模型）和 BOM（浏览器对象模型）（关于浏览器操作的API）是 JavaScript 编程中常用的两种操作对象模型。DOM 操作 HTML 文档，而 BOM 则负责处理浏览器窗口和工具栏等浏览器功能的相关操作

API:  是指可以实现特定功能的属性和方法.  浏览器 ：是一种客户端软件,可以解析网页(web)

二.Bom提供了什么对象？

BOM 提供了一种访问浏览器窗口和工具栏以及其他浏览器功能的方式

//关于BOM操作的属性和方法
 window 
 location 
 history 
 navigator 
 screen  
 document 

 三.它们分别提供了什么作用？

window 对象代表了当前浏览器窗口或标签页。开发者可以使用 window 对象来访问浏览器导航历史、定时器、警报框等功能。还可以使用窗口对象的方法打开新窗口、关闭当前窗口、调整窗口大小等

 location 对象代表了包含当前文档的浏览器窗口的位置。开发者可以使用 location 对象获取当前文档的 URL、修改 URL 以及在新窗口中打开 URL 等

navigator 对象代表了浏览器本身，开发者可以使用 navigator 对象获取浏览器名称、版本、操作系统类型等信息。

screen 对象代表了用户屏幕的属性，如屏幕分辨率、色彩位数等。

history 对象代表了浏览器的历史记录，开发者可以使用 history 对象访问前进或后退的历史

 四.了解不同对象的用法!

1.window对象

 // window对象

//系统弹窗
 window.alert('111')
 window.prompt('请输入')
 window.confirm('您确定要离开吗')
//定时器
setTimeout(function(){
      console.log('test');
 

    },1000)

2.location对象

// 获取网页地址
      console.log(location.href);
 // http://127.0.0.1:5500/javascript%E5%B9%B4%E5%90%8E/%E7%AC%AC%E4%B8%80%E5%A4%A9/code/03-location%E5%AF%B9%E8%B1%A1.html

var v1 = decodeURIComponent(location.href);
      console.log(v1);
      // http://127.0.0.1:5500/javascript年后/第一天/code/03-location对象.html

      // 编码
      var k = encodeURIComponent("你好世界");
      console.log(k);//%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
  // 获取路径的参数  寻找？后面内容
      console.log(location.search);//?page=1&pageSize=100   网页地址跟在问号后面的部分

// 获取路径中的锚点值  带#号后面的数据
      console.log(location.hash);//#/login?page=1&pageSize=100

 // 获取路径中的端口 (0~65535)
      // 端口：设备与外界通信的出口  （0~65535)
      console.log(location.port); //5500

      // 获取路径中的协议
      // 协议：一种网络通信的约定/规则
      console.log(location.protocol); //http:

      // IP  地址/位置
      console.log(location.hostname); //127.0.0.1

      // 页面刷新的方法
      // location.reload()

3.history对象

 // history 对象（浏览器历史记录信息对象）
      console.log(history);

 // 全局函数  可前进一个历史记录的函数
      function goForWard() {
        // 前进一个历史记录，必须是点击过某链接有前进的过的动作才有用
        history.forward();
      }

      //  可后退一个历史记录的函数
      function goBack() {
        // 返回上一级历史
        history.back();
      }

4.navigator对象

  // navigator  对象（客户设备信息对象）

      console.log(navigator);
   // 获取客户端信息
      var userAgent = navigator.userAgent;
      console.log(userAgent);

//我们可以对设备进行获取与判断

 // 封装函数获取设备信息
      function getDevice() {
        var userAgent = navigator.userAgent;
        // 判断这个字段是否存在，不存在则为-1
        if (userAgent.indexOf("iPhone") > -1) {
          return "ios";
        } else if (userAgent.indexOf("Android") > -1) {
          return "android";
        } else if (userAgent.indexOf("Windows") > -1) {
          return "pc";
        } else {
          return "未知";
        }
      }
      console.log(getDevice());

5.screen对象

   // 设备宽高（设备屏幕信息对象）
    console.log(screen);

6.cookie对象！！！

cookie 是一种浏览器缓存数据的一种机制（缓存数据的方式）

要在http协议下才能使用，文档协议打开用不了

作用 ：缓存数据、共享数据

弊端：数据体积小，约4kb(20条)

 // 使用：
      // 设置cookie  缓存数据
      document.cookie = "color=red; expires=" + (new Date("2024-2-25"));


 // 获取cookie缓存数据
      var str = document.cookie;
      console.log("缓存的数据:", str);


 // 删除cookie缓存数据
      document.cookie = "color=; expires=" + (new Date("1970-1-1"));