BOM操作

最新推荐文章于 2024-08-22 18:06:31 发布

lingengy

最新推荐文章于 2024-08-22 18:06:31 发布

阅读量441

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/w1lgy/article/details/78085508

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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);                       // Games
console.info(window.getName());                  // Games
console.info(this == window);                    // true
console.info(this == self);                      //  true
console.info(window == self);                    // true

window.name = 'Kobe';                            //直接在window对象上定义属性，会同时修改全局变量的值，相反，修改全局变量的值，window对象的属性值也会修改
console.info(name);
delete window.name;                              //既定义了全局变量，又在window对象上定义了属性，删除时虽然没有报错，但是并没有起作用
console.info(name);                              //Kobe
console.info(window.name);                       //Kobe

window.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的方法或属性进行检测浏览器版本，在使用特定方法时，如果担心兼容性，则可以使用特性检测。