博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BOM操作
阅读量:5909 次
发布时间:2019-06-19

本文共 4183 字,大约阅读时间需要 13 分钟。

BOM是Browser Object Model的简写,意思是流量器对象模型,BOM操作就是访问和操作浏览器窗口的模型。

BOM整体对象图:
这里写图片描述
核心是window对象;

以下有特殊双重身份:

window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;

document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象

location对象既是window对象的属性,同时也是document对象的属性。

1. window对象 (从两个方面看待:ECMAScript规范中的Global对象,也是BOM中的顶级对象)

1.1 window作为ECMAScript中的Global对象

1_引用window对象的属性和方法时,可以省略window。(就像Globle对象一样)

2_在全局作用域中this和window指向同一个对象,另外,还可以使用self来引用window对象,全等关系即:this===window===self。
3_在全局作用域中定义的变量和函数也会成为window对象的属性和方法,但是和直接在window对象上定义属性还是有区别:

a、全局变量不能使用delete删除(相当于给window定义属性时将属性特性[[Configurable]]赋值为false了),        直接在window对象上定义的属性可以使用delete删除(直接定义window对象时属性特性[[Configurable]]赋值默认为true)。        如果同时定义了全局变量和window对象的属性,则删除window属性时不起作用。b、尝试访问未定义的全局变量会抛出异常,但是访问未定义的window对象的属性则只是返回undefined。(这里可以很好地利用此特性进行检测兼容性)
var name = 'Games';                               //全局作用域中定义的变量和函数会成为window对象的属性和方法,但是不能使用delete删除function getName(){    return this.name;}console.info(window.name);                       // Gamesconsole.info(window.getName());                  // Gamesconsole.info(this == window);                    // trueconsole.info(this == self);                      //  trueconsole.info(window == self);                    // truewindow.name = 'Kobe';                            //直接在window对象上定义属性,会同时修改全局变量的值,相反,修改全局变量的值,window对象的属性值也会修改console.info(name);delete window.name;                              //既定义了全局变量,又在window对象上定义了属性,删除时虽然没有报错,但是并没有起作用console.info(name);                              //Kobeconsole.info(window.name);                       //Kobewindow.team = 'cavs';                            //直接在window对象上定义属性,可以使用delete删除console.info(window.team);delete window.color;console.info(window.color);                      //undefined

1.2 window作为BOM中的顶级对象

1.2.1 浏览器整个窗口与框架

没有子框架时:window、self、top和parent都相等,都是指最顶层框架,即浏览器窗口。  有子框架时:window、self 和 top 都为最顶层框架,parent指向当前框架的直接上层框架.
如果页面中包含框架,则每个框架都有自己的window对象,并且保存在父窗口的frames集合中.  可以通过索引(从0开始,从左至右,从上至下)或者框架名称name属性访问相应的window对象。每个window对象都有一个name属性,表示所处框架的名称。

1.2.2 window作为顶层对象的主要方法:

这里写图片描述
兼容性:表示窗口位置的属性有screenLeft、screenTop、screenX、screenY、表示窗口大小的属性有innerWidth、innerHeight、outerWidth、outerHeight,但是它们的具体含义和不同的浏览器密切相关。在处理浏览器差异性建议使用JS框架。

2. history对象

history对象保存着从窗口被打开起的历史记录,每个浏览器窗口、标签页、框架都有自己的history对象。

history对象的主要属性和方法有:
这里写图片描述

3. location对象

location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;它既是window对象的属性,同时也是document对象的属性.

主要属性有:
这里写图片描述
主要方法有:
这里写图片描述
常用情况,将url后面参数键值对分别添加到对象中保存。例如url?username=Games&age=31,取出args[“username”]=”Games”,args[‘age’]=31;

function getQueryStringArgs(){
//用逗号隔开可用var进行多个变量声明 var qs = (location.search.length > 0 ? location.search.slice(1) : ""), //如果?后无数据,则返回空数组,并且去掉查询字符串前面的问号 args = {}, //空对象用于接收数据 items = qs.length ? qs.split("&") : [], //将参数以&分隔 item = null, name = null, value = null, i = 0, len = items.length; for (i=0; i < len; i++){ //循环处理,将每一个参数的名称和值加入到参数对象中 item = items[i].split("="); //通过等号分割,返回数组 name = decodeURIComponent(item[0]); //进行编码处理 value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; //键值对匹配添加到对象中 } } return args; } var args = getQueryStringArgs(); //假定查询字符串返回?username=Gamest&age=31 console.info(args["usename"]); //"Gamest" console.info(args["num"]); //"10"

4. navigator对象

navigator对象用来描述浏览器本身,包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.

但是各个浏览器及浏览器的不同版本之间对这个对象的实现也不尽相同.
特性检测:不建议直接使用navigator的方法或属性进行检测浏览器版本,在使用特定方法时,如果担心兼容性,则可以使用特性检测。

5. screen对象

screen对象用来表明客户端显示器的能力。多用于测定客户端能力的站点跟踪工具中。

包括浏览器窗口外部的显示器的信息,如像素宽度和高度等,每个浏览器中的screen对象都包含着各不相同的属性。
screen对象属性有:
这里写图片描述

6. document对象

document对象既是BOM顶级对象的一个属性,更是DOM模型中的顶级对象,在DOM中一起总结。

你可能感兴趣的文章
拯救网管老克
查看>>
livecd-iso-to-disk脚本应用和分析
查看>>
MySQL内核深度优化
查看>>
我的电脑里没有共享文档----解决办法
查看>>
JS -------------------设置弹出框位置屏幕的中间
查看>>
saltstack常用模块及组件备忘
查看>>
2016 年 Web 开发工具新生热门榜
查看>>
Ubuntu服务器入门指南
查看>>
AutoCAD_ ID 、指针、句柄和 ads_name的区别
查看>>
DHCP抓包
查看>>
LVS+keepalived(DR)
查看>>
我的友情链接
查看>>
程序运行的原理
查看>>
我的友情链接
查看>>
java学习中static关键字,即静态的运用,及如何为代码写说明
查看>>
给Extjs2.x GridPanel添加goup系方法
查看>>
NFS搭建
查看>>
编写Shell脚本二
查看>>
epel
查看>>
HTML5 WebSocket 技术介绍
查看>>