BOM全称Browser Object Model - 浏览器对象模型，他提供了很多对象，用于访问浏览器的功能，没有规范，BOM的核心是window
什么是window，什么是document?
window是js中最大的对象，表示窗口，包含document
document文档对象，表示HTML
1、window对象
1、window
// 所有的全局变量和全局函数，都是window的成员。

var a = 5;functionfn() {
console.log('平头哥');
}

console.log(a);
console.log(window.a);

fn();
window.fn();

//-----------------------//window是一个对象，它下面就有很多的属性和方法//console.log(window); // {}
var n = 0;for (var attr inwindow) {
n++;
console.log(n, attr, window[attr]);
}
系统对话框
//所有 JavaScript 全局对象均自动成为 window 对象的成员。//alert：有确定按钮的弹出窗，返回undefined
var n = window.alert('弹出');
console.log(n);
//confirm：有确定和取消的弹出窗，确定返回true，取消返回false
var n = window.confirm('来不来？');
console.log(n);
//prompt：有输入框的弹出窗，确定返回输入框的内容，取消返回null
var n = window.prompt('请填入你的年龄', 800);
console.log(n);
open和close
打开
关闭
//可以通过js的方式，打开一个页面
//打开//window.open(url, 打开窗口的方式, 设置窗口大小, 新窗口是否取代浏览器记录中的位置)//_self ：在当前窗口打开//_blank:在新窗口打开//返回新页面的window对象
//关闭//被关闭窗口的window对象.close(); 只能关闭由js打开的窗口
var btn = document.querySelectorAll('button');var w = null; //新打开窗口的window对象的引用
//打开
btn[0].onclick = function() {
w= open('https://www.baidu.com/', '_blank', 'width=600px,height=400px', false);//console.log(w);
}
//关闭
btn[1].onclick = function() {
w.close();
}
2、location对象
//location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
console.log(location);
//从location里面获取信息//console.log(location.href); // url地址//console.log(location.hash); // #号后面的东西，包括#号//console.log(location.search); // ?号后面的东西，包括?号//console.log(location.host); // 返回服务器名称和端口号//console.log(location.hostname); // 域名//console.log(location.pathname); // 文件地址//console.log(location.port); // 端口号//console.log(location.protocol ); // 协议
//设置//location.hash = '123'//location.search = 'a=2&c=3'
setTimeout(function() {//跳转页面
location.href = 'https://www.baidu.com/'},3000);
3、history对象
保存着用户上网的历史记录，从窗口被打开的那一刻算起。
history.go(-1); //后退一页
history.go(1); //前进一页
history.go(2); //前进两页
history.back();//后退
history.forward();//前进
4、navigator对象
navigator 对象的属性通常用于检测显示网页的浏览器类型
console.log('浏览器代号', navigator.appCodeName);
console.log('浏览器名称', navigator.appName);
console.log('浏览器版本', navigator.appVersion);
console.log('是否启用了cookie', navigator.cookieEnabled);
console.log('硬件平台', navigator.platform);
console.log('用户代理', navigator.userAgent);
console.log('代理语言', navigator.systemLanguage);
2、位置属性
1、元素宽高
获取元素的宽高(不能获取隐藏元素的宽高)
var box = document.getElementById('box');
console.log(box.clientWidth); //120 width + padding
console.log(box.offsetWidth); //122 width + padding + border
console.log(box.clientHeight); //120 height + padding
console.log(box.offsetHeight); //122 height + padding + border
获取特殊标签
console.log(document.body); //body标签
console.log(document.documentElement); //html标签
document.title = '起飞了'; //获取title标签
获取可视区宽高 (html的宽高)
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
元素上边框和左边框(用处不大)
console.log(box.clientTop); //获取元素上边边框的宽度
console.log(box.clientLeft); //获取元素左边边框的宽度
2、元素位置
元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，则返回body
元素.offsetTop 返回离它最近的有定位属性的父级的顶边的距离，如果没有定位的父级，则返回body的距离
元素.offsetLeft 返回离它最近的有定位属性的父级的左边的距离，如果没有定位的父级，则返回body的距离