JS中BOM相关知识点总结(必看篇)

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>

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

窗口关系和框架

如果页面中包含框架,则每个框架都拥有自己的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对象是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性。window.location和document.location引用的是同一个对象。

location对象的属性:

JS中BOM相关知识点总结(必看篇)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>查询字符串参数</title> </head> <body> <script type="text/javascript"> function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //保存数据对象 args = {}, //取得每一项 items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //在for循环中使用 i = 0, len = items.length; //逐个将每一项添加到args对象中 for (i=0; i < len; i++){ item = items[i].split("="); //decodeURIComponent用来解码name和value,因为查询字符串应该是被编码过的 name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; } } return args; } //假设查询字符串是: ?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10" //这样一来,每个查询字符串参数都成了返回对象的属性,极大地方便了对每个参数的访问 </script> </body> </html>

使用location对象可以通过很多方式来改变浏览器的位置。

其中,最常用的方式是:使用assign()方法并为其传递一个URL

location.assign(“https://www.jb51.net“)

这样就可以立即打开新的URL并在浏览器的历史记录中生成一条记录。

同样的,将location.href和window.location设置为一个URL值,也会以该值调用assign()方法。

location.href=”https://www.jb51.net”;
window.location=”https://www.jb51.net”;

这两种方式的效果和显示调用assign()方法效果完全一样

此外,通过修改location对象的其他属性也可以改变当前加载的页面。

JS中BOM相关知识点总结(必看篇)

每次修改location的属性(hash除外),页面都会以新的URL重新加载。修改hash的值会在浏览器的历史记录中生成一条新的记录

在url:#helloword中的'#helloworld'就是location.hash,改变hash并不会导致页面刷新,所以可以利用hash值来进行数据传递,当然数据容量是有限的。

当通过上述任何一种方法修改URL之后,浏览器的历史记录中就会生成一条新纪录,因此通过点击”后退”按钮都会导航到前一个页面。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzddj.html