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():关闭一个窗口

window对象三个事件

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

• 1.window.onload:界面上所有的内容加载完毕之后才触发这个事件
• 2.window.onbeforeunload:界面在关闭之前会触发这个事件
• 3.window.onunload:界面在关闭的那一瞬间会触发这个事件

location对象

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

  • （1）打开新网页：location.assign(‘你要打开的新网页的url’)

  • （2）替换当前网页：location.replace(‘要替换的网页url’)

  • (3) 刷新当前网页: location.reload()

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

history对象

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

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

navigator对象

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

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

总结

*- 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(’

      http://www.itheima.com

      ');

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

    • window.location.replace(’

      http://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
    • console.log(screen.height);//1080