BOM
Browser Object Model 浏览器对象模型,用于操作浏览器
背景
页面中的顶级对象是document,浏览器中的顶级对象是window
页面中所有的内容都属于浏览器的,页面中的内容也都是属于window
window的一些事件触发时期:
1. window.onload - - 页面加载完毕时触发;
2. window.onbeforeunload - - 页面关闭之前触发;- - Chrome中无效
3. window.onunload - - 页面关闭时触发; - - Chrome中无效
window中常用对象
1. location - - 浏览器中的地址栏
常用的属性有:
属性名称 | 描述 |
---|---|
hash | 地址栏中#及后面的内容- - “#xxxxx” |
host | 主机名及端口号 - - 比如“localhost:8080” |
hostname | 主机名 - - 比如本地“localhost” |
pathname | 相对路径 |
port | 端口号 |
protocol | 协议 |
search | 搜索的内容,从问号往后的内容 |
href | 跳转的链接地址 和 location.assign(链接地址); 方法是一样的效果 |
常用方法
- location.assign(“链接地址”); 跳转到指定链接地址;
- location.reload(); 重新加载;
- location.replace(“链接地址”);- - 它和 assign() 的区别在于,它没有历史记录所以不能返回,是对当前地址的替换跳转;
2. history - - 浏览器的历史记录 可以实现浏览器上的前进和后退功能
常用的方法:
- history.forward(); 页面前进
- history.back(); 页面后退
- history.go(num); num 是正数就是前进,负数就是后退;
3. navigator
- userAgent - - 获取用户浏览器的信息包括类型以及版本
- platform - - 获取浏览器所在操作系统平台的类型
BOM中的定时器
1. 通过方法window.setInterval(函数,毫秒值);
这里的function就是处理函数,t是毫秒值,即页面每隔多少毫秒执行一次该函数。返回值是定时器的id。定时器是页面加载完毕后,间隔了定时器的毫秒值以后才执行的
清空定时器window.clearInterval(定时器id);
只需要将定时器的id给清除掉就行了:
var timeId = setInterval(function(){},t);
window.clearInterval(timeId);
2. 通过window.setTimeout(函数,毫秒值);
返回值也是该定时器的id
该定时器只会执行一次,就不再执行,但是要手动去清除掉,不然会占用内存,
清除定时器window.clearTimeout(定时器id)
var timeId = window.setTimeout(fun,2000);
window.clearTimeout(timeId);
DOM对象中offset常用的相关属性
在css样式中定义的宽、高,通过 元素对象的.style.width 或者height是无法获取到的,而通过标签中的style属性直接设置宽高属性是可以通过对象的.style.width/height 获取到的
所以在获取元素的宽高值的时候不能通过 对象.style.width/height 来获取。
dom 对象的 offsetWidth属性可以获取对象的宽度,但是返回值是number类型,不带px单位。
常见的属性有:
- offsetWidth 元素的宽度值包括border宽度;
- offsetHeight 元素的高度值包括border宽度;
- offsetLeft 元素的左边距值;
- offsetTop 元素的上边距值;
offsetLeft
- 纯标准流:当元素均是标准流布局方式时它的值为父级元素的margin+padding+border + 自己的margin值;
- 脱离标准流时: 此时offsetLeft的值为:自己的本身的left+自己本身margin值;
offsetTop 和offsetLeft的值计算方式是一样的。
window.getComputedStyle(元素, null).left; - - Chrome和Firefox支持
该方式也可以获取left属性的值,且该方法获取的值跟是不是标准流没有关系,也就是说它可以获取到left属性的值,但是IE8不支持
document.getElementById("").currentStyle.left; IE 8支持
也可以获取到left属性的值
由上可以做一下获取某个元素的某个属性值的兼容代码
function getValueForStyle(element,attribute){
return window.getComputedStyle ? window.getComputedStyle(element,null)[attribute]:element.currentStyle[attribute];
}
兼容鼠标移动式文本不被选中的代码:
document.onmousemove = function () {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
DOM对象的scroll常用的相关属性
- scrollWidth :元素中如果内容不超出盒子的话就是盒子的宽度,超出的话就是内容的宽度数值,不包含边框;
- scrollHeight: 元素中如果内容不超出盒子的高度的话就是盒子的高度,超出的话就是内容的实际高度数值,不含边框;
- scrollTop: 上边滚动的距离值;
- scrollLeft:左边滚动的距离
封装获取滚动距离的方法:
function getScroll() {
return {
left:window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
top:window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
}
}
DOM对象的client相关的属性
client 是元素的可视区域
- document.getElementById(“xx”).clientWidth: 元素可视区域的宽度数值,不含元素边框;
- clientHeight : 元素可视区域的高度数值,不包含border值;
- clientLeft: 左边框的数值
- clientTop: 上边框的数值
- clientX: 可视区域的横坐标数值
- clientY: 可视区域的纵坐标数值
BOM对象的page相关的属性Chrome和Firefox支持但是IE8不支持
- window.event.pageX = clientX + scrollLeft;//IE8 中没有pageX属性
- window.event.pageY = clientY + scrollTop;//IE8 中没有pageY属性