BOM模块:
首先我们先知道什么是BOM?
BOM对象:浏览器对象模型,BOM部分主要是针对浏览器的内容,其中常用的就是window对象和location,提供了一些独立于内容页面与浏览器窗口进行交互的对象接口,它的核心是window对象,window是全局对象很多关于浏览器的脚本设置都是通过它。
BOM也是由一系列相关的对象组成,并且每个独享都提供了很多方法和属性,但是BOM缺少标准化,JS的语法的标准化是ECMA组织提出的,DOM的标准化组织W3C,BOM最初始Netscape浏览器标准的一部分。
之前我们也学习了DOM我们来看看这两者有什么区别吧:
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM将文档当做一个对象来处理 | BOM的顶级对象是window |
主要学习的是对页面元素的操作 | 学习的是浏览器窗口交互的一些对象 |
DOM是W3C标准规范 | 是浏览器厂家在格子浏览器上定义的规范 |
window顶级对象是JS访问浏览器窗口的一个接口,window是一个全局变量,声明所有的全局变量,全局方法函数最终都是window对象的属性或者方法
窗口加载事件的两种写法:
1.window.onload = function () { }
2.window.addEventListener ("load",function(){ })
文档加载事件:window.addEventListener("DOMContentLoaded",function(){ }
定时器:
1.setTimeout();
定时炸弹计时器:使用时指定一个时间,知道事件一到直接执行绑定的事件,只会执行一次
window.setTimeout(function(){
alert("hello");
},3000)
第一个参数:事件所执行的函数
第二个参数:延迟的时间,时间间隔以毫秒为单位
停止计时器:window.clearTimeout(计时器标识符)
2.serInterval();
闹钟定时器使用时指定一个时间段,然后每隔这个时间段都会调用一次执行函数,哪怕第一次执行函数也会等待一个时间段后才执行
window.setInterval(function(){
console.log("hello");
},1000);
参数同上
停止计时器:window.clearInterval(计时器标识符)
练习:每秒输出一个数字
var i = 0;
window.setInterval(function () {
console.log(i);
i++;
},1000);
location对象:
window对象给我们提供了一个location属性,这个对象主要用于获取或设置窗体的url地址,并且可以用于解析url
URL:
同一资源定位符(Uniform Resource Location)是互联网上的标准资源地址,网络所有的数据都以文件形式保存,每个文件在网络世界中都有一个唯一的URL,它包含的信息指出文件的所在位置及浏览器的处理方式
port:端口号可选,如果省略使用的是默认的端口,http默认的端口号是 80
path:路径由0个或多个"/"+文件地址等组成,表示主机上的文件地址目录
属性:
- href:获取或设置一个url
- host:返回主机(域名)
- port:返回端口号,如果未写返回空字符串
- pathname:返回路径
- search:返回参数,URL参数是指URL地址中网址之后的?以后
- hash:返回片段,URL中#后面的内容
方法:
- assign():和href一样,可以跳转页面,重定向跳转
- replace():替换当前页面,不记录入历史中,所以不能后退页面
- reload():重新载入页面,相当于刷新按钮,如果参数为true相当于强制刷新
navigation对象:
navigation对象主要是记录有关浏览器的信息,常用的属性userAgent,这个属性可以返回由客户端发送至服务器的user-agent头部的值
history对象:
window对象为提供的一个history对象来进行与浏览器的历史记录进行交互
- back():实现浏览器后退功能
- forward():实现浏览器的前进功能
- go(参数):前进后退功能,参数如果是1前进一个页面,如果是-1后退一个页面,如果是N则前进或后退N个页面