跟着艾文一起学前端-第17篇-JavaScript - BOM

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属性