一、什么是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(); }