BOM浏览器对象模型

zxp鹏
97 阅读8分钟

BOM浏览器对象模型

BOM与DOM介绍

  • JavaScript语言由三部分组成

    • ECMAJavaScript：定义了js的语法规范

  • Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象

    • Dom定义了一套操作HTML文档的API（节点的增删改查）

  • Bom：Brower object model浏览器对象模型 例如：一个浏览器的窗口就是一个window对象

    • Bom定义了一套操作浏览器窗口的API

  • Bom主要由五大对象组成：

    • window:浏览器核心对象
    • location：包含当前页面的URL信息
    • history：history对象主要用于记录你当前窗口的历史记录
    • navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等
    • screen：获取用户电脑的屏幕分辨率
      • 这个一般不用，因为对开发者没啥作用

window对象

  • 1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象
    • (1).所有的全局变量都是window对象的属性：最顶级的对象
      • document对象
      • bom对象
      • 全局的方法：alert(),setInterval()...........
    • (2).只要是window的属性和方法，在使用的时候都可以省略window
      • 例如：window.alert() 可以省略window写成alert()
      • 例如：window.document 可以省略window写成document
    • (3).window对象有一个特殊属性叫做name
      • 它永远都是一个字符串，无论给他赋什么值
  • 2.window对象有两个常用的方法：open()与close()
    • open():打开一个窗口
    • close():关闭一个窗口

` 1.window是顶级对象，所有的全局变量都是window对象的属性 let age = 18; console.log ( window.age );

2.只要是window对象的属性和方法，window可以省略
console.log ( window.document === document );true

3.window有一个特殊的属性叫做name，它永远都是一个字符串
console.log ( window.name );//默认是一个空字符串
window.name = 123456;
console.log ( name );//永远都是一个字符串
就算你重新声明一个变量叫做name，也无法覆盖它
let name = [123];
console.log ( name );

//打开新窗口
document.getElementById('open').onclick = function (  ) {
    /**
    @param 第一个参数：URL  要打开的窗口网址
    @param 第二个参数：类似于a标签的target属性，是替换当前窗口还是新开一个窗口
    @param 第三个参数：新窗口特征：大小和位置等(新窗口才有效_blank)
    @param 第四个参数：布尔类型  true/false:把新开的窗口加入/不加入到浏览器历史记录
    @return 新打开的window对象
    */
   let newWindow = window.open('https://www.baidu.com', '_blank', 'top=100,left=100,width=500,height=300', true );
}

//关闭窗口
document.getElementById('close').onclick = function (  ) {
    //参数就是你想要关闭的窗口对象，如果不写，默认就是关闭自己
    //1.这样写如果关闭的是顶级窗口谷歌和火狐会失效，如果失效可以使用下面这种写法
    //window.close( );

    /*2.谷歌火狐为了安全起见会拦截我们的代码，js代码只能关闭用js代码打开的界面，
    所以我们用js先假装在当前窗口打开自己，然后再关闭自己*/
    //这里的url不是空字符串""，而是一个空格字符串  " "
    window.open(" ","_self").close();
}

window对象三个事件

window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

1.window.onload:界面上所有的内容加载完毕之后才触发这个事件

2.window.onbeforeunload:界面在关闭之前会触发这个事件

3.window.onunload:界面在关闭的那一瞬间会触发这个事件

    //由于我们script标签写在了body标签的上面，这行代码会在body内容还未加载的时候就执行
    console.log ( document.getElementById ( "p1" ) );//null  此时编译器还未解析p标签

    //1.window.onload：界面上所有内容加载完毕后会触发
    window.onload = function ( ) {

   // 由于编译器是从上往下解析html文件的，如果我们的js代码写在body前面，就有可能无法获取dom对象
      console.log ( "当前界面全部加载完毕" );
   //window.onload无论写在界面什么位置都是等整个界面加载完毕之后才会执行
      console.log ( document.getElementById ( "p1" ) );
    }

    //2.window.onbeforeunload:界面在关闭前触发
    window.onbeforeunload = function (  ) {
        /*  1.这个方法主要用于在界面关闭之前保存一些重要数据
            2.也可以弹出一个提示框挽留一下用户
        */

        //return 内容：浏览器会自动弹出一个挽留窗口
        //谷歌和火狐都会拦截这种恶心事，只有IE支持
        return '你真的要狠心抛弃我吗';
    }

    //3 window.onunload:界面关闭时触发
    window.onunload = function (  ) {
        console.log('界面正在关闭');

    }

location对象

  • 1.location对象：包含当前页面的URL信息

    • url：全球统一资源定位符
    • url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
    • 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解

  • 2.location对象有三个常用的方法

    • （1）打开新网页：location.assign('你要打开的新网页的url')
    • （2）替换当前网页：location.replace('要替换的网页url')
    • (3) 刷新当前网页: location.reload()
     //1.location对象信息查看
 console.log ( window.location );//location对象
 console.log(location.hash);//资源定位符（锚点定位）
 console.log(location.host);//主机   host = hostname + port
 console.log(location.hostname);//主机名（ip地址）
 console.log(location.port);//端口号
 console.log(location.href);//完整的url路径
 console.log(location.pathname);//资源路径
 console.log(location.protocol);//url的协议
 console.log(location.search);//url请求的参数

 //2.assign：打开新网页
 document.getElementById('assign').onclick = function (  ) {
     //会留下历史记录（可以回退）
     window.location.assign('http://www.itheima.com');
     //上面这行代码等价于下面这行代码
     //window.location.href = 'http://www.itheima.com';
 }

 //3.replace:替换当前网页
 document.getElementById('replace').onclick = function (  ) {
     //不会留下历史记录（不能回退）
     window.location.replace('http://www.itcast.com');
 }

 //4.刷新当前网页
 document.getElementById('reload').onclick = function (  ) {
     //相当于按了F5刷新当前网页
     window.location.reload();
 }```

history对象

history对象主要用于记录你当前窗口的历史记录

  • 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）

  • history.forward():前进

  • history.back():后退

       document.getElementById('forword').onclick = function (  ) {
    //跳转到当前网页历史记录的下一页，如果没有下一页的历史记录，则不跳转
    history.forward()

navigator对象

navigator对象：包含当前浏览器的信息

  • 工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

      console.log ( navigator );//navigator对象
  console.log ( navigator.appVersion );//当前浏览器版本信息
  console.log ( navigator.platform );//当前浏览器的硬件平台
  console.log ( navigator.userAgent );//当前浏览器信息

  //使用场景1：判断当前用户的操作系统是32位还是64位
  //谷歌和IE  64位显示WOW64    火狐显示Win64
  if(navigator.userAgent.indexOf('WOW64') != -1 || navigator.userAgent.indexOf('Win64') != -1){
      console.log ( "64位" );
  }else{
      console.log ( "32位" );
  }

  //使用场景2：判断用户当前使用哪种浏览器
  if(navigator.userAgent.indexOf('Chrome') != -1){
      console.log ( "谷歌浏览器" );
  }else if(navigator.userAgent.indexOf('Firefox') != -1){
      console.log ( "火狐浏览器" );
  }else{
      console.log ( "IE浏览器" );//也有可能是其他小众浏览器，可以忽略不计
  }

总结

  • bom对象

  • 1，windows对象

    • 指的是当前浏览器窗口，它是JS中的顶级对象
    • 1.特点
      • (1).所有的全局变量都是window对象的属性：最顶级的对象
      • (2).只要是window的属性和方法，在使用的时候都可以省略window
        • window.alert() 可以省略window写成alert()
        • window.document 可以省略window写成document
      • (3).window对象有一个特殊属性叫做name，它永远都是一个字符串，无论给他赋什么值
    • 2.两个常用方法
      • open()：打开一个新窗口
        • window.open('https://www.baidu.com', '_blank', 'top=100,left=100,width=500,height=300', true );
      • close()：关闭一个窗口
        • window.close(要关闭的window对象)
        • 野路子，自己关闭自己:window.open(" ","_self").close();
    • 3.三个事件
      • window.onload:界面上所有的内容加载完毕之后才触发这个事件
      • window.onbeforeunload:界面在关闭之前会触发这个事件
      • window.onunload:界面在关闭的那一瞬间会触发这个事件

  • 2.location对象

    • location对象：包含当前页面的URL信息

      • url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
      • 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解

    • 一些属性

      • location.hash
        • 资源定位符（锚点定位）
      • location.host
        • 主机 host = hostname + port
      • location.hostname
        • 主机名（ip地址）
      • location.port
        • 端口号
      • location.href
        • 完整的url路径
      • location.pathname
        • 资源路径
      • location.protocol
        • url的协议
      • location.search
        • url请求的参数

    • 三个常用方法

      • window.location.assign('

        www.itheima.com

        ');

        • 打开新网页，会留下历史记录（可以回退）

      • window.location.replace('

        www.itcast.com

        ');

        • 打开新网页，不会留下历史记录（不能回退）

      • window.location.reload();

        • 刷新当前网页,相当于按了F5刷新当前网页

  • 3.history对象

    • history对象主要用于记录你当前窗口的历史记录
    • 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
      • history.forword():前进
      • history.back():后退

  • 4.navigator对象

    • navigator对象：包含当前浏览器的信息
    • 工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
    • navigator.appVersion 当前浏览器版本信息
    • navigator.platform 当前浏览器的硬件平台
    • navigator.userAgent 当前浏览器信息

  • 5.screen对象

    • 非常的不常用，获取电脑屏幕像素
      • console.log(screen.width);//1920 议
      • location.search

        • url请求的参数

avatar
文章
阅读
粉丝