Javascript中的Bom

写在前面

相信学习前端的小伙伴应该都知道Javascript可以简单的分成两个部分，一个是JS基础的ECMAScript和WebAPI的Dom和Bom，相信很多初学的小伙伴都对WebAPI的Dom很熟悉，毕竟Dom的操作确实会更频繁一些，主要是对文档对象的操作；现对来说，而Bom的操作会更少一些（至少我本人是这样）。所以常常会忘记Bom的各种方法与内容，因此，写一篇Bom的基础文章让大家能够参考学习同时自己也能查阅；和小伙伴们共同学习进步。

Bom

Bom定义

• 提供了独立于内容而与浏览器窗口进行交互的对象，Bom由一系列的对象构成的，并且每一个对象都提供了方法和属性，由于缺乏标准，所以兼容有很多的问题。

window对象

• window对象是浏览器的顶级对象

  • window对象是一个全局对象，定义在全局的变量、函数都会变成window对象的属性和方法
  • 调用它的方法的时候可以省略掉window的书写

• window对象的常见事件

  • 窗口加载事件

    • window.onload = function() {} 或者 window.addEventListener('load',function() {})

      1. 作用：当文档内容（图像、css、html）加载完成才会执行，所以可以把它放到文档任何地方，实现<script>的位置任意化
      2. Tip: window.onload这种写法是只能写一次，如果写多个后面的会覆盖前面的onload函数，而用addEventListener就可以写多次‘；但是addEventListener是有兼容要求的

    • docunment.addEventListener('DOMContentLoaded',funcition() {})

      ​ 1.区别：load事件是等页面全部加载完成以后，包含页面的图片、iframe等等；而使用DOMContentLoaded则是Dom加载完成，不包含Dom元素得加载即可运行，所以他的速度会更加快，但是有兼容要求，ie浏览器要ie9以上。

  • 调整窗口大小事件

    • window.onresize = function() {};或者window.addEventListener('resize',function() {})
    • 作用：只要窗口得大小发生变化，每一像素就会触发一次这个事件；可以用它和window.innerWidth（获得当前屏幕宽度）来完成对响应式布局。

  • 窗口打开

    • window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法可以接收4个参数

  • 对话框弹出

    • alert()：弹出系统对话框通常为警告的作用，弹出的弹框只有一个确认按钮
    • confirm()：弹出一个对话框有确认的作用，通常有两个按钮（确认和取消）
    • prompt()：弹出一个提示框，会让用户输入文本，包含输入域和两个按钮

定时器对象

• setTimeout(回调函数，几毫秒后执行)
  • 由于页面中常常会有定时器，我们经常给定时器起名字（标识符），为了区分每一个定时器，可以在定时器执行之前一般要清理之前的定时器，避免定时器的效果叠加造成的问题
  • 第一个参数就是常说的回调函数，所谓的回调函数在这里简单理解就是需要一定条件才去触发的函数；比如onclick的函数也是一个回调函数
• setInterval(回调函数，几毫秒后执行)
  • 这个函数和之前的setTimeout的区别就是，这个函数是隔指定的时间调用一次回调函数，而那个则是只调用一次
• clearTimeout()/clearInterval()：清理定时器，它的参数是我们给定时器起的名字，也就是定时器的ID值

location对象

• window对象提供了loaction对象用于获取或者设置窗体的地址

• window对象的属性和方法

  • location.href()：获取或设置整个URL
  • location.host()：返回主机名
  • location.search()：返回参数，也就是地址栏中？后面的所有内容
  • location.port()：返回端口号
  • location.assign()：跟href一样，可以跳转页面，但是会记录原来的页面，浏览器的回退功能可以实现
  • location.replace()：可以跳转但无法后退，推荐使用，跳转的url会替换浏览器历史记录中当前显示的也页面
  • location.reload()：重新加载页面
  • loaction.hash()：返回哈希地址（也就是地址中#后面跟零个或者多个字符串）

history对象

• 用于和浏览器的历史记录进行交互，包含用户访问过的URL，也就是保存着用户的上网历史记录，从窗口被打开的那一刻开始计算起。

• 属性和方法

  • history.back()：可以后退功能
  • history.forward()：可以前进功能
  • history.go(参数)：前进或者后退的功能，参数为“1”前进一页；参数为“-1”后退一页
  • length属性：保存着历史记录的数量，这个数量包括所有的向后和向前的记录

• 由于是window对象的属性所以每个浏览器窗口、标签页乃至每个框架都有自己的history

navigator对象

• 主要用于获取浏览器的主要信息，有很多的属性；比较常用的有：

  属性和方法	说明
  userAgent	浏览器用户代理字符串
  cookieEnabled	表示cookie是否启用
  language	浏览器的主语言

Bom和Dom的区别

1. 首先二者操作的对象不同，Dom（文档对象模型）从翻译我们就可以看出这是一个基于文档对象的应用程序接口，也就是说我们用到的方法“存在”这个对象里面的，我们使用的时候是在调用这个对象下的方法；举个简单的栗子：根据ID获取元素：Document.getElementById()；从这我们就可以看出这个是基于文档对象的。所以被用来操作文档，说的通俗一点就是用来操作HTML和XML的。

   而Bom（浏览器对象模型）顾名思义；就是基于浏览器对象的，我们上面提到的对象和方法就都是基于浏览器的操作。同样我们可以从他的调用方法看出来；举个栗子：获取地址栏地址：window.localtion.href；不过常常在我们编写代码的时候是可以把window给省略的，因为默认会带上window对象。

2. 其次，二者的关系是包含的关系，Docunment的对象是window对象的下的其中一个对象，从window.document就可以看出，DOM的最根本的对象是BOM的window对象的子对象。

3. Dom的标准是唯一的，遵循的是W3C的标准；而Bom的标准并不唯一，有各个浏览器厂商决定

Tip：每个字都是自己手敲的噢，如果有错别字还请多多包涵，觉得有用的话点个赞支持一下吖~~