js BOM基础

Posted 2021-12-19 chuliuxiang

window对象

ECMAScript是javascript的核心，但是如果要在web中使用javascript，那么BOM(浏览器对象模型)才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
window对象：BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
    因此，所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。

 

<script type="text/javascript">
    var age=26;//这里定义的全局变量和全局函数被自动归在了window对象名下
    function sayAge()
        console.log(this.age);
   
    console.log(window.age);//26
    sayAge();//26  相当于window.sayAge()
    window.sayAge();//26

    //全局变量和在window对象上直接定义属性的唯一区别：全局变量不能够通过delete操作符删除，而直接在window对象上定义的属性可以
    window.color=‘red‘;
    delete window.age;
    delete window.color;
    console.log(window.age);//26
    console.log(window.color);//undefined
    </script>12345678910111213141516

 

<script type="text/javascript">
        /*
        还要注意：尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未经声明的变量是否存在
         */
        //这会抛出错误，因为oldValue未定义
        var newValue=oldValue;
        //这不会抛出错误，因为是一次属性查询
        var newValue=window.oldValue;
    </script>123456789

 

窗口关系和框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引(从0开始，从左到右，从上到下)或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含着框架的名称。

可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。不过，最好使用top，而不是window来引用这些框架。因为，top对象始终指向最高(最外)层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为对于一个在框架中编写的任何代码来说，其中的window对象指向的都是那个框架的特定实例，而不是最高层的框架。

与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。
与框架有关的最后一个对象是self，它始终指向window。self和window对象可以互换使用。

在使用框架的情况下，浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

 

location对象

//对象中的属性和方法
    //location对象
    //console.log(window.location);

//    //地址栏上#及后面的内容
//    console.log(window.location.hash);
//    //主机名及端口号
//    console.log(window.location.host);
//    //主机名
//    console.log(window.location.hostname);
//    //文件的路径---相对路径
//    console.log(window.location.pathname);
//    //端口号
//    console.log(window.location.port);
//    //协议
//    console.log(window.location.protocol);
//    //搜索的内容
//    console.log(window.location.search);
onload=function ()
   document.getElementById("btn").onclick=function ()
        //设置跳转的页面的地址
       //location.href="http://www.jd.com";//属性----------------->必须记住
       //location.assign("http://www.jd.com");//方法
        //location.reload();//重新加载--刷新
        //location.replace("http://www.jd.com");//没有历史记录，不能返回
   ;
;

 

history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页以及每个框架，都有自己的history对象与特定的window对象关联。处于安全方面的考虑，开发人员是无法知道用户浏览过的URL，不过，借助用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。该方法接收一个参数：表示向前或者向后跳转的页面数的整数值。负数表示向后跳转(类似单击浏览器的后退按钮)，正数表示向前跳转(类似浏览器的前进按钮)。