定义:BOM(Browser Object Model)是浏览器对象模型。
提供了独立于内容与浏览器窗口进行交互的对象,他的核心对象就是window(顶层对象)。
js语法的标准化组织是ECMA,但是BOM没有规范标准,所以提供了的方法会存在兼容性问题。
BOM是由一系列的对象组成。每个对象都提供了自己属性和方法。
有三个节点:元素节点、文本节点、属性节点
BOM结构图
document:文档。
anchors:锚点,forms:表单,images:图片,links:链接,location:也是url,可以说是和window下的location是一样的。目前来说这些用到不多,作为了解。
frames:框架集。
history:和历史记录相关的,前进或者后退。
history:保存了用户上网的历史记录。 后退一页:history.go(-1) / history.back() 前进一页:history.go(1) /history.forward() 前进n页 history.go(n) 后退n页 history.go(-n)
location:当前的url相关的信息。
location属性:hash(返回从#开始的url,若无则返回空字符串) host(主机带端口号) hostname(主机名) href(完整的路径) origin pathname(硬盘的路径) port(端口号) protocol(返回当前的协议) 方法:href="" 完整的路径 reload() 本页面的加载 需要在事件触发中执行,否则会一直执行刷新页面 assgin() 本页面替换 有历史记录,可以回退 replace() 新的页面替换当前的页面,不能后退
navigator:浏览器相关的信息,版本号。navigator.userAgent()方法可以输出浏览器信息,用来判断浏览器类型.下面封装了一个用于检测pc端或者app。
function checkUserAgent() { var arr = ["Android", "iPad", "iPhone", "SymbianOS", "Windows Phone"]; var str = navigator.userAgent; for (var i = 0; i < arr.length; i++) { if (str.indexOf(i) != -1) { location.href = "mobile.html" } } } checkUserAgent();
screen:当前屏幕相关的对象
Window对象的属性alert 、confirm、prompt、open()、close()、onload()
consfirm:有返回值 ture/false
alert:返回值是undefined
onscroll:滚动条滚动时触发
onresize:浏览器窗口改变时触发 。顶部悬浮 的可以用到
open():新打开一个页面,原来的页面还存在,此方法不太常用
close():关闭打开的页面,此方法不太常用
onload():dom元素和资源加载完毕之后才执行
BOM中可视区域的理解
可视区域距离页面顶部的高度:scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
可视区域距离页面的左边的距离scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
可视区域的宽度document.documentElement.clientWidth
可视区域的高度:document.documentElement.clientHeight
获取 ****/**/* 格式的时间:
var date=new Date();
date.toLocaleDateString() //本地字符串日期
date.toLocaleTimeString() //本地时间
定时器和延时器 是一个异步函数。
延时器:隔一段时间只执行一下fn,setTimeout(fn,time) ,广告栏的设置弹出窗口需要用到或者用户登录成功之后的提示框也可以用延时器来实现。
定时器:每隔一段事件执行一下fn ,setInterval(fn,time) 注意定时器的清除。
js:是单线程,同一个时间只能做一件事。
异步函数:无需关心其他的操作,等自身的条件满足时就执行
同步函数:上一个操作完了才会执行下一步。