标题什么是BOM
1.BOM是Browser Object Model的简写，即浏览器对象模型。
2.BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法
3.BOM没有统一的标准(每种客户端都可以自定标准)。
4.BOM的顶层是window对象
BOM对象学习 window
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">/*三种弹框方式*/function demo1(){//只是含有确认按钮的弹框window.alert("七夕快乐"); }function demo2(){ //含有确认和取消按钮的弹框var flag= window.confirm("是否删除？"); alert(flag);}function demo3(){//含有输入内容的弹框var v= window.prompt("请输入昵称","例如：李白"); alert(v);}function getDate(){//获得时间对象var date=new Date();var time= date.toLocaleString(); //获得span对象document.getElementById("span_1").innerHTML=time;}//定时器 1000毫秒// 过指定的时间调用方法---只会执行一次//window.setTimeout("getDate()",1000);//间隔1s就会调用指定的方法---调用多次 var iny= window.setInterval("getDate()",1000); function stop1(){//清除指定的定时器window.clearInterval(iny); } function close1(){//关闭当前的窗口//window.close();//打开指定的页面window.open("http://www.baidu.com"); }</script></head><body onload="getDate()"><input type="button" name="" id="" value="关闭窗口" onclick="close1()" />当前的时间是：<span id="span_1"></span>
<input type="button" name="" id="" value="停止计时" onclick="stop1()" /><input type="button" name="" id="" value="弹框一" onclick="demo1()" /><input type="button" name="" id="" value="弹框二" onclick="demo2()" /><input type="button" name="" id="" value="弹框三" onclick="demo3()" /></body>
</html>
BOM对象学习 Location History Screen Navigator
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">/************Location*****************/function demo1(){//获得Location对象//http://127.0.0.1:8020/2018-08-17JavaScript/03JS学习.htmlconsole.log(window.location.href);//127.0.0.1:8020 ip+端口号console.log(window.location.host);//8020console.log(window.location.port);//127.0.0.1console.log(window.location.hostname);//修改当前的地址********window.location.href="http://www.baidu.com";//重新加载网页window.location.reload();}/********History对象学习*******************/function demo2(){//返回浏览器历史列表中的 URL 数量。var le=window.history.length;console.log(le);//后退按钮window.history.back();//前进的按钮window.history.forward();//-3:后退3个网页 3：前进3个网页 0：刷新window.history.go(-3); }/***********Screen 对象学习(了解)**********************/function demo3(){var he =window.screen.height;var wi=window.screen.width;//获得屏幕的分辨率console.log(he+"----"+wi); }/*************Navigator 对象的学习(了解)******************/function demo4(){//用户代理var us= window.navigator.userAgent;//Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36console.log(us);}</script></head><body><input type="button" name="" id="" value="Location对象的学习" onclick="demo1()" /><input type="button" name="" id="" value="History对象的学习" onclick="demo2()" /><input type="button" name="" id="" value="Screen对象的学习" onclick="demo3()" /><input type="button" name="" id="" value="Navigator对象的学习" onclick="demo4()" /></body>
</html>
