浏览器对象模型BOM

BOM则是浏览器对象模型,而DOM是文档对象模型。通过BOM,JavaScript可以对浏览器进行操作,而通过DOM JavaScript可以对文档的内容进行操作。这一节内容我们会来看JS是如何操作浏览器的,而下一节我们会来看JS如何操作HTML文档。

使用控制台了解Window对象

BOM的核心是window对象,表示的是浏览器的一个窗口,而window对象又具有双重角色,它既是通过JavaScript访问浏览器窗口的API(window对象定义了非常多的属性、方法与构造函数),又是一个Global(全局)对象(它的属性和变量是全局变量和全局函数)。

技术文档:Window对象

我们可以通过实战的方式以及结合技术文档来加深对以上描述的理解,使用Chrome浏览器打开微信公众平台,然后打开开发者工具,在控制台直接输入以下命令:

控制台会显示整个window对象,我们可以在控制台展开window对象的内容来了解详细的细节。

window对象的方法

我们可以看到window对象里面有很多函数,比如:

在控制台我们可以看到很多以f开头的函数,而这些函数就是window对象的方法,我们需要提供具体的参数就可以返回一些值。大家以后有时间可以结合MDN的技术文档来具体去了解这些函数的使用说明与方法。

window对象的方法非常多,只有通过技术文档和实战大家才能对window对象有一个整体的了解,几乎所有的教程都是没有办法对整个window对象进行一一讲解的。因此自学能力在工作之中就显得尤为重要了。有了技术文档,大家只需要对概念有实战性的了解,不需要死记硬背。

window对象的属性

我们同样在window对象里发现里面有很多值(环境不同所得到的值也会不同,下面的数值仅为参考),也有一些值是空值null,比如:

这些就是window对象的属性,通过window对象的属性我们可以直接获取到关于浏览器的一些具体的信息。

window对象的对象属性

在window对象里,我们还能发现有些属性不仅有值,而且它的值本身就是一个对象,而这个对象里面又包含不少属性(值或空值null)和方法(函数),比如:

在window对象里我们可以看到有一个引用自身的属性也叫window。大家可以依次展开这些对象的内容,粗略了解一下大致信息,后面我们还会进一步介绍的。

window对象是js中的顶级对象,所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用的时候可以省略window。所有 JS 全局对象、函数以及变量都属于 window 对象。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

使用控制台了解BOM

在数组与对象的章节里,我们了解到要访问对象的属性和方法,可以使用点表示法。接下来我们仍然会通过在控制台输入命令的方式来了解window对象的属性和一些对象属性。

window对象的属性

前面了解到window对象表示的是浏览器打开的一个窗口,我们结合文档来了解这个窗口的一些属性。我们直接在控制台里面逐行输入下面的命令:

大家可以通过拉伸调整一下浏览器的宽度和高度,来了解这两个属性的意思。内容区域的宽高是指除去浏览器菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

Location 对象的属性

Location对象表示当前窗口显示的文档的URL。

技术文档:Location 对象

使用浏览器打开一个比较复杂的网页,京东Apple列表链接

这个链接里包含了搜索的关键词为apple,所以在链接上可以看到keyword=apple以及wq=apple,只显示有货为stock=1,必须为京东物流wtype=1,价格由高到低为psort=1,显示商品列表的第二页page=3(京东翻页数字是奇数增加),打开这个链接显示的就是符合以上条件的商品列表,链接可以包含的信息是非常多的,爬虫、链接点击追踪、页面筛选等等都会需要我们掌握对页面的分析。

打开链接后,再打开该页面的开发者工具,然后在控制台输入以下命令:

或者:

这两个的结果是一样的,不仅如此,这个结果和我们之前在window对象里查看到的location属性也是一样的。

也就是说,当我们只是要调用window这个全局对象的属性(对象属性)时,我们可以不需要在前面加window。直接使用location、history等即可。

我们再来在控制台里面逐行输入下面的命令(当然展开location对象也能看到完整信息),看Location对象的属性可以返回京东Apple列表链接这个链接的什么值:

我们再来打开小程序开发文档WXSS的链接,然后打开控制台,输入location查看一下与之对应的各个属性的值。

这里主要了解一下hash(#号后跟零或多个字符),这里的hash是锚点,它可以记录页面的位置。当我们打开上面这个链接的时候,它是直接跳转到:

这个链接的WXSS 样式处。

 

浏览器对象

Navigator对象可以返回打开该文档的浏览器的信息。

技术文档:Navigator 接口

通过获取用户打开网页的浏览器的信息,我们可以根据这些信息统计用户访问网页的浏览器版本、语言、操作系统等信息,也可以根据操作系统的不同来适配不同样式的网页。

使用Chrome浏览器打开微信公众平台,然后打开开发者工具,在控制台直接输入以下命令:

也可以在控制台逐条输入以下代码,来进一步了解:

 

Screen对象

Screen对象表示的是屏幕的信息,通过获取用户访问网页的屏幕的大小,我们可以对网页进行适配等操作。

技术文档:Screen 对象

我们可以直接在控制台里输入代码来了解screen对象的属性与方法:

在控制台逐条输入以下代码,来进一步了解:

关于宽度或高度,我们已经有了screen.availWidth、screen.width、window.innerWidth,这些属性,大家注意区分即可。

document对象

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

技术文档document对象

使用Chrome浏览器打开微信公众平台,然后打开开发者工具,在控制台直接输入以下命令:

得到的结果会与之前有所不同,返回的结果是整个DOM树的根节点。我们想要了解document对象有哪些属性和方法可以在控制台输入:

console.dir()可以显示一个对象所有的属性和方法。我们可以看到document对象的属性也非常多。

console.dir()对于document这种用console.log()打印的不是对象的属性和方法时很管用,不过console.dir()通常只用在了解一个对象上,最好不要写在生产开发之中。

在控制台逐条输入以下代码,了解一下document对象的属性:

document对象是非常重要的,这一节我们只是先了解一下,后面我们还会花大量的时间来研究它。

 

history对象

history对象表示用户浏览页面的历史记录。只有浏览器存储了用户访问页面的历史记录,网页才会有后退和前进的功能。

技术文档:History 对象

使用Chrome浏览器打开小程序开发文档,然后多次点击该网页的二级页面之后,我们再来在控制台里输入:

然后在控制台使用点表示法访问history对象的属性

通过以上的实战大家可以粗略掌握document、history、location、screen、window等对象,相信大家对window对象属性获取到的就是浏览器的一些相关信息有了一定的理解。

接下来我们来看window对象的一些方法,如何来操作浏览器。这些方法,我们都可以去技术文档里查看一下详细而又专业的用法。文档在手,天下我有,不对,文档在手,死记硬背不再有。

打开和关闭窗口

在前面我们接触过window对象的alert()方法、prompt()方法和confirm()方法。接下来我们了解如何打开窗口和关闭窗口。

打开之前我们建好的main.js,在main.js里面输入以下代码:

打开index.html,会发现浏览器会新建一个打开了百度链接的小窗口,这是因为执行了window.open()方法,而且index.html这个窗口会关闭,这是因为执行了window.close()方法。

内容窗口的滚动

要对内容窗口进行滚动,首先要网页里面有足够高度的内容,我们自己新建内容有点麻烦,我们仍然可以使用开发者工具进行实战。

使用Chrome浏览器打开微信公众平台,然后打开开发者工具,在控制台直接输入以下命令:

这里的top是y坐标的位置,left是x坐标的位置,而behavior是滚动的行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant。当大家了解了这个函数了之后,相信大家应该知道如何该如何滚动到页面的顶部了吧?

window.scrollTo的受限

使用Chrome浏览器打开小程序开发文档,然后在控制台输入上面的命令,发现window.scrollTo并没有反应啊,这是因为这个页面有滚动条,也就是在页面的css样式里设置了overflow:auto;或者overflow-yauto;。

浏览器的前进与后退

使用Chrome浏览器打开小程序开发文档,然后多次点击该网页左侧菜单的起步代码构成小程序能力等之后,我们再来在控制台里输入:

hash的前进与后退

要了解一下hash记录,也就是我们可以多次点击小程序开发文档左侧菜单代码构成下的JSON配置WXML模板WXSS样式JS逻辑交互,然后我们再来把上面的代码都执行一遍。我们发现页面的前进与后退并没有刷新整个页面,而是在hash里进行跳转。

本节任务

  1. 通过控制台你了解了Window对象有哪些属性了么?结合对象的属性以及子命名空间、点表示法相关的知识了解如何访问Window对象的属性;
  2. window对象里有哪些属性是可以通过给属性赋值就可以创建和修改的,而哪些是不可写的?
  3. 结合Window对象的具体操作,以及通过控制台展开的内容,你是否明白查询技术文档的意义?
  4. 实战学习一下打开和关闭窗口、窗口的滚动、浏览器的前进与后退着几个小功能,并理解这些功能都是建立在window对象的属性和方法之上的。