基础BOM操作

BOM

BOM ：（Browser Object Model）浏览器对象模型（简而言之，就是对浏览器进行操作）。

1.关闭标签页：

let btn1 = document.getElementById("btn");

//点击btn1关闭窗口
btn1.onclick = function(){
	window.close();
};

2.打开标签页：

//点击btn1打开一个窗口（如果要弹出很多窗口，浏览器会禁止）。
btn1.onclick = function(){
	window.open(
		"http://xxxxxxxxx",//参数一：url
		"_blank"           //参数二：在什么窗口打开（新窗口）
	);
};

3.浏览器滚动（持续性触发事件）

window.onscroll = function(){
	console.log("scroll");
}

4.浏览器可视区域发生改变（大小发生调整时），持续性触发事件

window.onresize = function(){
	console.log("onresize");
}

5.重要的四个对象：

//让当前页面跳转的办法
window.location.ref = "http://xxxxx"
location.reload//刷新页面

//历史跳转
history.forward//前进
history.back//后退
window.history.go(1)//正数往前走
window.history.go(-1)//负数往后走
window.history.go(0)//刷新页面
location.reload//刷新页面

//navigator 可查看userAgent、lang、版本等信息
window.navigator

//屏幕可视区的宽高，分辨率等的信息
window.Screen

6.BOM实际应用（实用）

• 获取可视区的宽高

//（包括了滚动条宽度）
window.innerWidth;
window.innerHeight;
//不包括滚动条宽度,兼容IE(推荐使用)
document.documentElement.clientWidth;
document.documentElement.clientHeight;

• 几个唯一标签的特殊获取方式

//获取html节点
document.documentElement
//head标签节点
document.head
//body标签节点
document.body
//title标签节点的文字内容，可以赋值修改值
document.title
document.title = "这是修改后的title"

• 各种宽高的获取

let wrap = document.getElementById("wrap");
//width+左右padding，没有单位
wrap.clientWidth
//height+上下padding，没有单位
wrap.clientHeight

//width+左右padding+左右边框
wrap.offsetWidth
//height+上下padding+上下边框
wrap.offsetHeight

//元素实际占据的宽,超出隐藏（overflow:hidden）都不会改变
wrap.scrollWidth
//元素实际占据的高
wrap.scrollHeight

• 各种边距的获取

//元素左边到定位父级的左边（不算父级边框）的距离 
// margin+left的值
wrapson.offfsetLeft
// margin+top的值
wrapson.offsetTop

//距离上，左
wrapson.get.getBoundingClientRect()
//right: 儿子右边到浏览器左边的距离
//left: 儿子左边到浏览器左边的距离
//top: 儿子上边到浏览器顶部的距离
//bottom: 儿子底部到浏览器顶部的距离

• 页面滚动宽高：页面向上滚动，超出可视区域（浏览器页面）顶端的距离

//如：总高度2000，滚动到底部，滚动高为：2000-可视区高度
document.documentElement.scrollTop;

//前提有滚动条，滚动到500px的地方,宽300的地方
document.documentElement.scrollTop({top:500,left:300})

欢迎大家观看指正。