跟着艾文一起学前端-第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属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值