学过前端开发的地球人应该都了解,JavaScript分为三个部分:ECMAScript(JS语言本身基础语法),DOM(文档对象模型,应用程序编程接口),BOM(浏览器对象模型)。

BOM,实际上与浏览器有关系。因此浏览器厂商可以按照各自的想法随意去扩展(基于window对象的扩展)。不过,扩展归扩展,每个浏览器之间都遵循着一套标准。学习BOM对于理解JS这门语言仍然是很重要的,因此不能忽视。以下是我的一些总结,给出一些常用方法。并不会细说每个方法如何使用,这篇文章的主要目的,就是希望BOM在我们脑子里形成一个简单的框架。知道一些常用的方法,在遇到问题的时候可以追本溯源。

BOM中存在五个对象:

  1. window对象(核心对象)
  2. location对象(即是window对象的属性,又是document对象的属性)
  3. navigator对象
  4. history对象:浏览器前进后退
  5. screen对象:可以通过此对象获取移动端理想视口的宽度

其他四个对象都是window对象下的属性,每个对象下都存在一些属性和方法,下面列出几种常见和常使用的方法,同时给出简单的说明。

  • window对象(核心对象)的常见方法

    • 异步:XMLHttpRequest构造函数
    • Number数据类型:Number, parseInt, parseFloat, isNaN, isFinite
    • 定时器:setTimeout, setInterval。这里想说明一下的是,setTimeout中回调函数中的this会指向window对象,原因其实很简单。在回调函数作为参数传递给了setTimout, 此时发生this的隐式赋值丢失。还有一个需要注意的是setTimeout的执行顺序问题。
    • url加密:encodeURI, encodeURIComponent方法
    • url解密:decodeURI, decodeURIComponent方法
    • 窗口尺寸:(innerWidth, innerHeight) (outerWidth, outerHeight),这里要与DOM中的client dimension和offset dimension区分开来,也就是clientWidth(Height) 和 offsetWidth(Height)
    • 窗口位置:(screenLeft, screenTop) (screenX, screenY)
    • 打开新窗口: open方法,此方法可接收三个参数
    • 系统对话框:alert, confirm, prompt方法
  • location对象
    • href属性:获取url地址, (也可以通过此属性设置url地址)
    • protocal属性:返回页面使用的协议, (也可以通过此属性设置protocal)
    • host属性:返回服务器名称和端口号,既包括hostname + port. (也可以通过此属性设置host)
    • hostname属性:返回不带端口号的服务器名称, (也可以通过此属性设置hostname)
    • port属性:返回端口号, (也可以通过此属性设置port)
    • pathname属性:返回url目录或文件名, (也可以通过此属性设置pathname)
    • hash属性:返回url中的hash(#content), (也可以通过此属性设置hash)
    • search属性:query string(如?name=keith&height=180), (也可以通过此属性设置search)
    • reload方法:页面以最有效的方式加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中加载。如果要强制从浏览器重新加载,可以传递一个true的布尔值。
  • navigator对象
    • userAgent:用户代理,查询用户使用的浏览器信息。在移动端上可用于判断用户使用的是哪种类型的移动设备或浏览器

BOM知识梳理的更多相关文章

  1. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  2. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  3. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  4. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  5. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  6. solr DIH 知识梳理

    solr DIH 知识梳理 web.xml中listener配置 <listener> <listener-class>org.apache.solr.handler.data ...

  7. Anliven - 基础知识梳理汇总 - 软件测试

    基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...

  8. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  9. java基础知识梳理

    java基础知识梳理 1 基本数据类型

随机推荐

  1. 通过Class类获取对象实例

    通过Class对象获取对象的方式是通过class.newInstance()方式获取,通过调用默认构造参数实例化一个对象. /** * Created by hunt on 2017/6/27. * ...

  2. 【译】第十五篇 Integration Services:SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  3. [转]Laplace算子和Laplacian矩阵

    1 Laplace算子的物理意义 Laplace算子的定义为梯度的散度. 在Cartesian坐标系下也可表示为: 或者,它是Hessian矩阵的迹: 以热传导方程为例,因为热流与温度的梯度成正比,那 ...

  4. 【API】Mysql UDF BackDoor

    1.MySQL UDF是什么 UDF是Mysql提供给用户实现自己功能的一个接口,为了使UDF机制起作用,函数必须用C或C ++编写,并且操作系统必须支持动态加载.这篇文章主要介绍UDF开发和利用的方 ...

  5. 实现checkebox全选取消操作

    方法一: javascript代码: function checkedChild(obj,index){ var checkBoxs = document.getElementsByName(&quo ...

  6. PowerDesigner导出word模版

    模板下载 解压至:C:\Program Files (x86)\Sybase\PowerDesigner 15\Resource Files\Report Templates 即可 感谢http:// ...

  7. 孤的Scrapy官文阅读进程

    上月底开始学习Scrapy爬虫框架,看了一些中文文档,讲应用.讲基础的,对其有一些了解了.终于在28日打开Scrapy的官网,并制作了其文档的思维导图,进而开启了其文档的阅读之旅. 本文展示了从6月2 ...

  8. 牛客红包OI赛 C 小可爱表白

    据说是个公式题. Code #include<cstdio> #include<cstring> #include<algorithm> using namespa ...

  9. 洛谷P1186玛丽卡

    传送门啦 先跑一遍最短路,将最短路的路径记录下来,然后枚举每一条最短路的边,将其断掉,记录此时的1-n的时间,取其中最大的一个时间即为所求. (通过 $ cut[][] $ 和 $ f[] $ 进行操 ...

  10. 奇妙的CSS之伪类与伪元素

    我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...