BOM和DOM
BOM:浏览器对象模型,他提供了独立于内容而与浏览器窗口进行交互的对象。
DOM:文档对象模型,它定义了访问和操作HTML文档的标准,即所有HTML元素的对象和属性以及访问它们的方法。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。
关系图
BOM
Browser Object Model,即浏览器对象模型。他不是一个对象,它是对象的集合,包含window、location、history、navigator等。可以通过这些对象来操作浏览器窗口和里面的文档。
在BOM中最顶层的对象是window对象,其它对象是window的一个属性,只不过这些属性本身也是对象。
BOM并没有统一标准,会有浏览器兼容问题。
顶层对象:window
window对象代表的是打开的浏览器窗口,该对象不需要创建,浏览器窗口打开后会自动创建window。
该对象是一个全局对象,所谓全局对象就是指文档中的所有的全局变量或方法都相当于window对象添加的属性,就可以利用window.的形式来调用属性和方法。
需要注意window对象可以使用关键字this表示,通常情况下window和this都是省略不写。
方法
1.alert()
作用:以提示框的形式输出信息
格式:window.alert(输出信息);
注意:该方法具有阻断程序执行的功能
2.confirm()
作用:以提示框的形式提供“确定”和“取消”两种状态的选择
格式:window.confirm(提示语句);
注意:如果点击的是“确定”,那么confirm函数的返回值为true,否则为false
3. prompt()
作用:提示用户输入数据
格式:window.prompt("提示文字", 默认值);
注意:返回值的类型为字符串类型,另外该函数的第二个参数可以省略
4.isFinite()
作用:判断一个数据是否为有限数据
格式:window.isFinite(数据);
注意:
- 如果测试的数据是有限数据,那么返回值为true
- 如果测试的数据是无限数据,那么返回值为false
- isFinite方法在执行时会自动调用Number方法将参数转换为数值型,如window.isFinite("100");结果为true
5.isNaN()
作用:判断一个数据是否为NaN
格式:window.isNaN(数据);
注意:
- 如果测试的数据为数值型,那么返回值为false,如window.isNaN(100),返回值为false
- 如果测试的数据为非数值型,那么返回值为true,如window.isNaN(3*"a"),返回值为true
- 该函数在执行时会自动调用Number方法,将参数转换为属性值,如果能转换为属性值型,结果false,如果转换不了,那么结果为true,window.isNaN("a");结果为true
6.open()
作用:打开一个新的浏览器窗口,返回值为代表该窗口的window对象
格式:window.open("新窗口地址", "窗口名称", "窗口的特性");
注意:
- 第二个参数,即窗口名称可以省略,但是如果省略,那么每次都会以新窗口的形式展现,如果加名称,那么第一次会是一个新窗口,以后会在该窗口中刷新
- 第三个参数中常用的属性
- width:设置窗口宽度
- height:设置窗口高度
- left:设置窗口距离屏幕左侧距离
- top:设置窗口距离屏幕顶端距离
- scrollbars:设置是否显示滚动条,默认不显示,属性值为yes或no(默认)
- resizable:设置是否允许调节子窗口大小,属性值为yes或no(默认)
- status:设置是否显示状态栏,属性值为yes或no(默认)
- location:设置是否显示地址栏,属性值为yes或no(默认)
- toolbar:设置是否显示工具栏,属性值为yes或no(默认)
7.close()
作用:关闭当前窗口
格式:window.close();
注意:火狐浏览器中默认情况下不允许使用JS关闭浏览器窗口,解决方法,在地址栏中输入about:config,然后搜索dom,然后更改dom.allow-scripts-close-window的值为true
8.setInterval()(循环定时器,用在小广告上时,利用格式:节点名.style.display = "none"设置消失事件)
作用:能偶重复执行某段代码,类似于循环,但是和循环的区别是,它可以设置重复执行的间隔时间
格式:window.setInterval(要重复执行的代码, 时间间隔);
注意:
- setInterval函数的第一个参数通常为一个函数,可以是普通函数,也可以是匿名函数,如果是普通函数,那么此处就是函数名,不加括号(如:格式为 fn 而不是fn())
- setInterval函数的第二个参数为时间间隔,单位为毫秒值,1秒=1000毫秒
- 该式的返回值为一个整数值,即setInterval的id值,该值可以用来清除setInterval
9.clearInterval()
作用:清除(终止)setInterval函数的执行
格式:window.clearInterval(id值);
10.setTimeout()(单次定时器)
作用:可以设置延迟执行某段代码的效果
格式:window.setTimeout(要执行的语句段, 延迟的时间);
注意:
- 该函数的第一个参数通常是一个函数,可以是函数名的形式,也可以是匿名函数
- 该函数的第二个参数是程序执行所需的延迟时间,单位为毫秒值
- 该函数的返回值为一个整数,该数值常用于clearTimeout方法里面,用来终止setTimeout方法的执行
- 该函数可以用来模拟setInterval的重复执行效果,示例如下
window.setTimeout(fn, 2000);
function fn() {
window.setTimeout(fn, 2000);
}
11.clearTimeout()
作用:停止setTimeout方法的执行
格式:window.clearTimeout(id值);
window对象的常用事件
onload:当页面中所有元素加载完成后触发该事件
onunload:当页面卸载时触发该事件,注意该事件并不是所有浏览器都支持,IE支持
onscroll:当拉动窗口滚动条时触发该事件
onresize:当浏览器窗口尺寸被改变是触发该事件
window对象表示浏览器中打开的窗口,它有以下重要特性
window.self:当前窗口
window.parent:当前窗口的父窗口
window.top:当前窗口的顶级父窗口
window.opener:打开当前窗口的父窗口
浏览器当前URL信息对象:location
属性
1.href:作用是设置或者获取地址栏中的地址信息
获取:window.location.href
设置:window.location.href = 值;
注意:通过href属性来跳转页面会产生浏览记录
2.protocol属性
作用:是获取地址信息中的协议部分
格式:window.location.protocol
3.host属性
作用:获取地址信息中的主机名和端口号
格式:window.location.host
4.hostname属性
作用:获取地址信息中的主机名,不包含端口号
格式:window.location.hostname
5. port属性
作用:获取地址信息中的端口号
格式window.location.port
6.pathname属性
作用:获取地址信息中的文件的相对路径
格式:window.location.pathname
7.search属性
作用:获取表单在提交时的字段名称和对应的值
格式:window.location.search
方法
1.reload方法
作用:刷新页面
格式:location.reload(参数); 参数为false或者是true
- false:意味着从缓存中加载文档
- true:意味着从服务器加载文档
2.replace方法
作用:用一个新的文档替换当前文档,其实就是实现页面跳转
格式:location.replace(新的文档地址);
注意:该方法不会产生浏览记录
3.assign方法
作用:重新加载一个文档
格式:location.assign(新的文档地址);
注意:该方法会产生浏览记录
浏览器本身信息对象:navigator
1.appVersion属性:作用是获取浏览器的版本信息,不准确
2.onLine属性:作用是判断是否处于联网状态,返回值为true(联网)或false(没有联网)
3.cookieEnabled属性:作用是判断浏览器是否开启cookie,返回值为true(开启)、false(没有开启)
客户端屏幕信息对象:screen
1.width:获取屏幕的实际宽度
2.height:获取屏幕的实际高度
3.availWidth:屏幕宽度减去任务栏的宽度,availWidth=width-任务栏宽度
4.availHeight:屏幕高度减去任务栏的高度,availHeight=height-任务栏高度
注意availWidth和availHeight存在浏览器兼容问题
浏览器访问历史信息对象:history
1.length属性:作用是获取浏览记录的长度(次数),谷歌和火狐浏览器中length的默认值为1,而IE浏览器中默认值为0
2.back方法:作用是跳转到上一个浏览记录,模拟浏览器的后退按钮
3.forward方法:作用是跳转到下一个浏览记录,模拟浏览器的前进按钮
4.go方法:该方法既可以实现后退效果,也可以实现前进效果
格式:history.go(参数);
注意:
- 如果参数为正数表示跳转到下一个浏览记录,即前进
- 如果参数为负数表示跳转到后一个浏览记录,即后退
- 但是要注意该方法可以通过值的大小表示跳转的距离,如history.go(2)表示跳转到下两个浏览记录,如果history.go(-3)表示跳转到后3个浏览记录