关于JS中BOM模型的学习总结

一、什么是BOM模型？

当我们打开某一web应用程序，系统会自动生成一个模型，该模型最顶层为Window对象，其他对象（document、screen、location）都是该对象的子对象。

二、BOM模型原理图

三、window对象

对象	说明
alert(message)	弹出警告框（信息提示）
confirm(message)	确认框（删除、重置时进行触发）
prompt(message[,defstr])	输入提示框
open(url[,name[,features]])	打开新窗口，规格参数如下： menubar 菜单栏 toolbar 工具栏 scrollbars 滚动条 fullscreen 全屏 directories 链接工具 location 地址栏 status 状态栏 resizable 是否可以调整大小 以上参数都是boolean类型数据，可以设置为（yes/no） width、height、left、top
close()	关闭当前窗口（有兼容性问题）
print()	打开当前窗口
moveBy(x,y)	相对移动
moveTo(x,y)	绝对移动
resizeBy(x,y)	改变窗口大小（相对）
resizeTo(x,y)	改变窗口大小（绝对）
scrollBy(x,y)	相对滚动
scrollTo(x,y)	滚对滚动
setInterval(表达式,毫秒)	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(表达式,毫秒)	在指定的毫秒数后调用函数或计算表达式。
clearInterval(定时器对象)	取消由 setInterval() 设置的 timeout。
clearTimeout(定时器对象)	取消由 setTimeout() 方法设置的 timeout。

例1：模拟打开新窗口

window.onload = function() {
    document.getElementById('btn').onclick = function() {
        window.open('http://www.baidu.com/','newwindow','width=500,height=400,menubar=yes');
    }
}

例2：通过js编写返回顶部功能

window.onload = function() {
    document.getElementById('btn').onclick = function() {
        window.scrollTo(0,0);
    }
}

例3：调用系统打印机打印当前窗口

window.onload = function() {
    document.getElementById('btn').onclick = function() {
        window.print();
    }
}

四、navigator对象（浏览器对象）

对象	说明
appCodeName	浏览器内核名称
appName	浏览器名称
appVersion	浏览器发行版本号
platform	操作系统信息
online	是否脱机工作
cookieEnabled	是否开启cookie
userAgent	用户代理信息，早期用于浏览器判断

document.write('浏览器内核名称：'+window.navigator.appCodeName+'<hr />');
document.write('浏览器名称：'+window.navigator.appName+'<hr />');
document.write('浏览器代理信息：'+window.navigator.userAgent+'<hr />');
if(window.navigator.userAgent.indexOf('MSIE') > 0) {
    document.write('IE浏览器');
} else {
    document.write('W3C浏览器');
}

五、location对象

对象	说明
host	主机名称
port	端口号，默认是80端口，此处一般都是空白的
href	获取当前页面的完成URL链接地址
pathname	路径名称
protocol	协议（http://协议https://协议）
search	获取包括？问号在内的参数
assign(url)	加载url页面（相当于跳转功能）

document.write('当前url地址：'+window.location.href+'<hr />');
document.write('搜索参数：'+window.location.search+'<br />');
// 加载新页面
window.location.assign('http://www.baidu.com');

六、screen对象

对象	说明
availHeight	可用高度
availWidth	可用宽度
colorDepth	颜色比特值
height	高度
width	宽度

document.write('屏幕宽度：'+window.screen.width+'<hr />');
document.write('屏幕高度：'+window.screen.height);

七、document对象

常用方法：

方法	说明
getElementById('id')	通过id属性获取指定的DOM对象
getElementsByName('name')	通过元素的name属性获取DOM对象，返回数组
getElementsByTagName('tagname')	通过标签名称获取DOM对象，返回数组

常用属性：

属性	说明
linkColor	链接颜色
alinkColor	正在访问的链接颜色
vlinkColor	访问后的链接颜色
bgColor	背景颜色
fgColor	字体颜色
title	标题

function display() {
    if(document.title=='BOM模型') {
        document.title='【有新消息了】- BOM模型';
    } else {
        document.title='BOM模型';
    }
    // 设置定时器调用display函数
    setTimeout('display()',1000);
}
window.onload = function() {
    display();
}