1.BOM简介
BOM 是 Browser Object Model,浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。
JavaScript的实现包括以下3个部分:
1.核心(ECMAScript):描述了JS的语法和基本对象。
2.文档对象模型 (DOM):处理网页内容的方法和接口
3.浏览器对象模型(BOM):与浏览器交互的方法和接口
2.BOM对象
BOM对象分为:
window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
location 对象,浏览器当前URL信息;
navigator 对象,浏览器本身信息;
screen 对象,客户端屏幕信息,可获取用户设备的种类
history 对象,浏览器访问历史信息
##window 对象
弹框:
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
navigator对象
navigator对象包含了所有浏览器的配置信息。
navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
navigator.appName:浏览器名称;
navigator.appVersion: 浏览器版本;
navigator.language:浏览器设置的语言;
navigator.cookieEnabled: 判断cookie是否启用(true是启用了)
navigator.plugins — 是个集合 判断是否安装了指定插件(plugin)
history对象
history对象保存当前窗口打开后,成功访问过的url的历史记录栈,内容不对开发人员开放,无法修改,只能进行三个操作:
前进:history.go(1); //前进一次
后退:history.go(-1);
刷新:history.go(0);
3. 浏览器窗口尺寸相关
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度 包含滚动条
可视区宽高:
document.documentElement.clientWidth 可视区 宽度 不包含滚动条
document.documentElement.clientHeight 可视区 高度 不包含滚动条
4.滚动距离
document.documentElement.scrollTop IE其他浏览器
document.documentElement.scrollLeft //横向
document.body.scrollTop 低版本chrome
5.滚动事件
croll 鼠标滚轮滚动或者点击滚动条
window.onscroll=function(){
}
6. load事件
网页加载事件:等待网页html/css资源加载完毕后触发
注意:
一个html文件中只能出现一次,如果出现多次,下面会覆盖上面的
使用场景:
如果js写在头部,应该将所有的js代码,扔进window.onload事件中,否则获取不了元素