BOM浏览器对象模型（知识点总结）

一.Bom

BOM是浏览器对象模型，内容和浏览器之间的交互，核心还是window

bom包括：location  screen    history   navigation  document

二.window对象

2.1-onload事件绑定

window.οnlοad=function(){
//代码块，用于在网页完全加载所有内容(包括图像、脚本文件、CSS 文件等)后执行脚本
}

2.1.1-注册监听写法

window.addEventstener('load',function(){
//代码块
})

2.2-onresize监听浏览器窗口大小

window.οnresize=function(){
console.log(window.innerWidth);
}

2.3-getComputedStyle获取非行内样式

console.log(window.getComputedStyle(元素).background)   

兼容：console.log(元素.currentStyle.height);

2.4-onscroll监听滑块

window.οnscrοll=function(){
var a=document.documentElement.scrollLeft
//浏览器滑块向右移动的位置或者被浏览器卷进去左边的内容的距离
var b=document.documentElement.scrollHeight//不包含边框 的内容部分的高度
var b=document.documentElement.scrollWidth//不包含边框 的内容部分的宽度
console.log(b);
}

三、location 对象

console.log(location.protocol);//获取协议
console.log(location.href);//完整的url
// url： http://127.0.0.1:5500/day11/code/bom.html/？usrname=‘zhansgsan’&age= #blink
console.log(location.hash);//锚点  #号后面的数据
console.log(location.port);//端口号
console.log(location.host);//域名和端口号
console.log(location.hostname);//域名
console.log(location.pathname);//目录或者文件名
console.log(location.search);//问号后面的数据

 

四、鼠标偏移量

btn.onclick = function (e) {
var e = e || window.event
console.log(e.clientX);//距离浏览器左上角水平的距离
console.log(e.clientY);//距离浏览器左上角垂直的距离

console.log(e.pageY);//距离文档左上角的距离
console.log(e.pageX);//距离文档左上角的距离

console.log(screenX);//距离电脑屏幕的距离
console.log(screenY);//距离电脑屏幕的距离
}

五.offset client scroll

5.1.1-offset上下左右

console.log(box[1].offsetTop);//获取距离定位属性的父元素的上方的距离

console.log(box[1].offsetLeft);//获取距离定位属性的父元素的左方的距离

5.1.2offset宽高

padding+border+width

console.log(box[1].offsetWidth);
console.log(box[1].offsetHeight);

5.2.1client上下左右

console.log(box[1].clientTop);//上边框的宽度
console.log(box[1].clientLeft);//左边框的宽度

5.2.2client宽高

padding+ width 

console.log(box[1].clientWidth);//自身内容的宽度
console.log(box[1].clientHeight);//自身内容的高度+padding

5.3-scoll

document.documentElement.scrollTop||document.body.scrollTop
//浏览器滑块向下移动的位置或者浏览器卷进去内容的高度

var a=document.documentElement.scrollLeft
//浏览器滑块向右移动的位置或者被浏览器卷进去左边的内容的距离

6.history

history.forward()//前进

history.back()//后退

history.go(1)//前进1步
history.go(0)//不动
history.go(-1)//后退1步