什么是BOM?
bom 是browser object model 也就是浏览器对象模型，BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
顶层对象：window
子对象：location、history、screen、navigator、document、event
一.window对象
window对象的方法
（一）alert 警告框
语法：window.alert()；或者 alert()；
功能：显示一段带有消息和确认按钮的警告框
说明：我们一般都是省略window简写
（二）confirm 选择框
语法：window.confirm()；或 confirm()；
功能：显示一个带有指定消息的和 确定及取消按钮的对话框
返回值：用户点击确定，confirm() 返回true
用户点击取消，confirm() 返回false
<script>
var value = confirm("confirm选择框");
if(value){
console.log(1);
}else{
console.log(2);
}
</script>
（三）prompt 输入框
语法：window.prompt( text[,defaultText] )；或者 prompt( text[,defaultText] )；
参数：
text：要在对话框中显示的纯文本（不是HTML格式文本）
defaultText：默认的输入文本
返回值：如果用户点击提示框的取消按钮，则返回null
如果用户点击确定按钮，则返回输入的内容
（四）open 打开一个新窗口
语法：window.open(pageURL，name，parameters)
功能：打开一个新的浏览器窗口或查找一个已名称的窗口
参数：
pageURL：子窗口路径
name：子窗口的名字
parameters：窗口参数（各参数用逗号分隔）
width 窗口宽度、
height 窗口高度、
left 窗口X轴坐标、top 窗口Y轴坐标
toolbar 是否显示浏览器工具栏（yes/no）、
menubar 是否显示菜单栏（yes/no）、
scrollbars 是否显示滚动条（yes/no）、
location 是否显示地址字段
status 是否添加状态栏
function openMailBox(){
window.open('__APP__/Admin/MessageNotice/mailBoxNew','消息通知','width=800,height=600,left=30%,top=30%,toolbar=no,menubar=no,location=no,status=no');
}
（五）close 关闭浏览器窗口
语法：window.close（）
功能：关闭浏览器窗口
（六）setTimeout 超时调用
语法：setTimeout（code，millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数：
1.code：要调用的函数名或要执行的js代码串
2.millisec：在执行代码前需等待的毫秒数
PS：setTimeout()只执行code一次。如果要多次调用请使用setInterval() 或者让code调用自己
<script>
//匿名函数
setTimeout(function(){console.log(1)},2000);
//声明函数
setTimeout(fn,3000); //不要写成setTimeout(fn(),3000); 函数名() 这样会直接调用函数
function fn(){
console.log(2);
}
</script>
（七）clearTimeout 清除超时调用
语法：clearTimeout(id_of_settimeout)；
功能：取消由setTimeout()方法设置的超时调用
参数：
1.id_of_sttimeout：由setTimeout() 返回的ID值，该值标识要取消的延迟代码块。
<script>
//匿名函数
var ID = setTimeout(function(){console.log(1)},2000);
clearTimeout(ID); //这样 超时调用将不会被执行
</script>
（八）setInterval 间歇调用
语法：setInterval（code，millisec）
功能：每隔指定的时间执行一次代码
参数：
1.code：要调用的函数名或要执行的js代码串
2.millisec：在执行代码前需等待的毫秒数
<script>
//匿名函数
var ID = setInterval(function(){console.log(1)},2000);
//声明函数
setInterval(fn,3000);
function fn(){
console.log(2);
}
</script>
实现简单动画效果例子
<html>
<head lang="en">
<meta charset="UTF-8">
<title>闪烁的文字</title>
<style type="text/css">
div{
width:200px;
height:200px;
line-height:200px;
border:2px solid gray;
text-align:center;
color:red;
}
</style>
</head>
<body>
<h3>会闪烁的文字</h3>
<div id="text"></div>
<script>
var fontStatus=0;
var textDiv = document.getElementById("text");
setInterval(change,500);
function change(){
if(fontStatus){ //疑问部分
status = 1;
textDiv.innerHTML = "★★★今日特卖★★★";
}else{
status = 0;
textDiv.innerHTML = "☆☆☆今日特卖☆☆☆";
}
}
</script>
</body>
</html>
（九）clearInterval 清除间歇调用
<script>
//匿名函数
var ID = setInterval(function(){console.log(1)},2000);
clearInterval(ID);
</script>
二、location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了功能，它既是window对象的属性，也是document对象的属性
（一）location.href 获取url
1.获取url
语法：location.href
功能：返回当前加载页面完整url
说明：location.href和window.location.href等价（window可以省略）
<script> console.log(location.href); </script>
2.设置url
语法：location.href = 'url';
功能：使网页加载到指定的url地址上
<script> location.href = '//www.baidu.com'; //建议写网站的时候不要加http:// </script>
（二）location.hash 获取锚点链接
1.获取锚点
语法：location.hash
功能：返回url中的hash（#以及后面的字符），如果不包含，返回空字符串
<script> //当前url为例:http://localhost/Web/JS/dom.html#fuck console.log(location.hash); //输出#fuck </script>
2.设置锚点
语法：location.hash = '#param';
功能：为url添上指定的锚点，实现页面上的锚点位置跳转
<a href="#bottom">到底部</a> <div id="div1" class="red" data-name="poorpenguin" style="height: 1000px;"> <p>测试1</p> </div> <div> <p>测试2</p> </div> <a id="bottom">这是底部</a><!-- 这是锚点 --> <script> //当前url为例:http://localhost/Web/JS/dom.html location.hash = '#bottom'; //打开当前页面会默认转到location.hash的指定的锚点位置 </script>
（三）location对象其他常用属性
<script> //当前url为例:http://localhost/Web/JS/dom.html?id=1&name=poorpenguin console.log(location.host); //返回服务器名称和端口号(如果有) localhost console.log(location.hostname); //返回不带端口号的服务器名称 localhost console.log(location.pathname); //返回url中的目录和文件名 /Web/JS/dom.html console.log(location.port); //返回url中指定的端口号，如果没有，返回空字符串 console.log(location.protocol); //返回页面使用的协议 http: console.log(location.search); //返回url的查询字符串，这个字符串以问号开头 ?id=1&name=poorpenguin </script>
（四）location.replace 重新定向URL
语法：location.replace(url)
功能：重新定向URL
说明：使用location.replace不会在历史记录中生成新记录（没有后退按钮）
<script>
location.replace('//wwww.baidu.com'); //页面对跳转到www.baidu.com
</script>
（五）location.reload 重新加载当前显示的页面
语法：location.reload()
功能：重新加载当前显示的页面
说明：location.reload()有可能从浏览器缓存中加载
location.reload(true)强制从服务器重新加载
三、history对象
history对象保存了用户在浏览器中访问页面的历史记录
（一）history.back()
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
（二）history.forward()
语法：history.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
（三）history.go(-n)
语法：history.go(-n)
功能：回到历史记录的前n步
（四）history.go(n)
语法：history.go(n)
功能：回到历史记录的后n步
四、screen对象
screen对象包含有关客户端显示屏幕的信息
（一）screen.availWidth(可用屏幕宽度)和screen.availHeight(可用屏幕高度)
<script>
console.log("屏幕宽度"+screen.availWidth); //是定死的屏幕宽度
console.log("屏幕高度"+screen.availHeight); //是定死的屏幕高度
</script>
（二）window.innerWidth(窗口文档显示宽度)window.innerHeight(窗口文档显示高度)
console.log("pageWidth："+window.innerWidth); //就是浏览器显示页面的窗口宽度
console.log("pageHeight："+window.innerHeight); //就是浏览器显示页面的窗口高度
五、navigator对象
提供了用户的浏览器、操作系统等信息，可通过当前对象得知用户所用浏览器类型、版本等。
（一）navigator.userAgent 用来识别浏览器名称、版本、引擎、以及操作系统等信息
语法：navigator.userAgent
例子：判断用户的浏览器类型
<meta charset="UTF-8">
<title>userAgent</title>
</head>
<body>
<input type="button" value="点击获取浏览器信息" id="browser">
<script type="text/javascript">
document.getElementById("browser").onclick=function(){
var browserInfo = navigator.userAgent;
var browerName = judgeTypeOfBrowser(browserInfo);
alert('您使用的浏览器是 '+browerName+' 浏览器');
}
/*判读浏览器类型*/
function judgeTypeOfBrowser(browerInfo){
var browerInfoLowerCase = browerInfo.toLowerCase(); //转小写
//浏览器种类
var browser = [
{type:'msie',name:'IE浏览器'},
{type:'firefox',name:'火狐浏览器'},
{type:'chrome',name:'谷歌浏览器'},
{type:'safari',name:'Safari浏览器'}
];
for(var i=0,len=browser.length; i<len; ++i){
if(browerInfoLowerCase.indexOf(browser[i].type)>0)return browser[i].name; //返回
}
return '未知';
}
</script>
</body>
</html>