JS之BOM详解（上）

李心一
4,129 阅读4分钟

想弄清楚DOM还是离不开咱们的灵魂三连问：它是什么？它有什么用？以及怎么去使用它?

一、何为DOM

在前面的文章中我们提到过前端界面的组成有三个重要部分HTML、CSS、JS（分别为结构、表现、行为）

其中JS的的三个重要组成部分为：ES（核心语法）、DOM（文本对象模型）、BOM（浏览器对象模型）

关于 DOM(文本对象模型) 我也在前文中有一篇详解 JS之DOM详解（上）

关于DOM先看看几个解释：

百度百科给予的解释：

可能大家看了这个解释对BOM还是模棱两可，不理解它到底是什么
其实简单讲BOM就是由一些对象构成，这些对象又包括许多属性和方法，通过操作这些对象的属性和方法可以用来实现与浏览器交互。

刚刚提到BOM由一些对象构成，那么到底是由哪些对象构成呢？
先看一下一个基本的BOM属性结构图

上面可以看到BOM的六大对象为：

  1. document ： DOM
  2. event : 事件对象
  3. history : 浏览器的历史记录
  4. location : 窗口的url 地址栏的信息
  5. screen : 显示设备的信息
  6. navigator : 浏览器的配置信息

我们在看看DOM对象的结构对比一下：

从上图对比我们可以看出BOM和DOM的几点差异
DOM：
文档对象模型
顶级对象是document
可以用来操作html页面的元素
标准化是w3c来制定
BOM：
浏览器对象模型
顶级对象是window
用来和浏览器之间进行交互
是由各浏览器厂商在各自浏览器上定义，没有一个统一的标准
其实DOM对象就相当于是BOM儿子，因为DOM对象的操作都是由浏览器来执行的

二、BOM的作用

我们通过上面的图也可以看出来，BOM就是提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置、改变窗口大小、打开新窗口、关闭窗口、弹出对话框、进行导航以及获取客户的一些信息如：浏览器品牌版本、屏幕分辨率....等等

1、BOM的顶级对象window对象的常用方法：

  1. prompt():弹窗输入
    prompt("你叫什么？",123)//第一个参数为弹框提示语，第二个为输入框的默认值

alert():弹窗输出

alert(111)

  1. confirm("");带确定、取消的提示框，分别返回true、false
  2. close();关闭当前浏览器窗口。
  3. open();打开一个新窗口
    参数一：新窗口的地址
    参数二：新窗口的名字
    参数三：新窗口的各种配置属性
  4. setTimeout();延时器，表示延时多少ms执行一个函数。
    参数一：可以传入匿名函数，也可以传入函数名。
    参数二：延时毫秒数
    参数三~参数n：传给回调函数的参数。
    例如：
    setTimeout(function(num1,num2){},2000,"haha",123);
  5. setInterval();定时器，表示每隔多少毫秒执行一遍，其他方法与setTimeout()完全相同。
  6. clearInterval和clearTimeout():分别清除定时器，延时器。

2、event：事件句柄，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单说就是事件在发生时进行的一个操作。
常用方法：

  1. onblur; 元素失去焦点。
  2. onchange; 域的内容被改变。
  3. onclick; 当用户点击某个对象时调用的事件句柄。
  4. onfocus; 元素获得焦点。
  5. onmousedown;鼠标按钮被按下。
  6. onmousemove;鼠标被移动。
  7. onmouseout;鼠标从某元素移开。
  8. onmouseover;鼠标移到某元素之上。

3、History：里面封装着当前窗口成功访问过的url历史
方法：

  1. length; 查看浏览器的历史访问的网页的个数；
  2. back(); 加载history列表中的前一个url
  3. forward();加载history列表中的下一个url
  4. go(); 加载history列表中的某个具体页面
  5. go(0);相当于刷新页面
    使用语法：
    window.history.length
    window.history.back()
    window.history.forward()
    window.history.go(0)

JS之BOM详解（下）

avatar
文章
阅读
粉丝