BOM：Browser Object Model：
浏览器对象模型：提供专门用操作浏览器的一些对象（属性和方法），没有标准（大部分浏览器还是统一的，唯独老IE与众不同）- 使用率相对较低
重点：定时器、事件对象event
DOM：是有标准的：w3c规定的，几乎没有兼容性问题
window对象介绍：扮演着两个角色
1、代替了ES中的global，充当全局对象 - 保存全局变量和全局函数
2、自己也带有一些属性和方法，指代当前窗口本身
网页打开新链接的方式：4种 - 目的：提升用户的体验感
1、替换当前页面，可以后退
HTML：<a href="url">内容</a>
JS：open("url","_self");
2、替换当前页面，禁止后退 - 场景：电商网站，付款后不允许退回去再次付款
history对象：记录着【当前窗口】的历史记录，只有有了历史才能前进后退
location对象：记录着【当前窗口】正在打开的url，而他又一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转
JS：location.replace("新url")
3、新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面
HTML：<a href="url" target="自定义name">内容</a>
自定义name的意思：每一个窗口底层都有一个名字，target其实就是在设置名字，name如果相同，新打开的窗口就会把旧窗口给替换掉（刷新）
JS：open("url","自定义的name");
总结：HTML能做的，JS都能做，JS能做的，HTML不一定可以
扩展a标签的作用：
1、跳转
2、锚点
3、下载：<a href="xx.exe/zip/rar/7z">内容</a>
4、打开：<a href="xx.图片后缀/txt">内容</a>
5、直接书写js：<a href="javascript:js代码;">内容</a>
window提供了属性和方法：
属性：获取浏览器的完整大小：outerWidth/outerHeight;
获取浏览器的文档显示区域的大小：innerWidth/innerHeight
获取屏幕的完整大小：screen.width/height;
弹出窗口
方法：1、打开窗口：var newWindow=open("url","自定义的name","width=,height=,left=,top=");
注意：1、第三个配置参数没有传入时，窗口大小和浏览器一样，并且黏在浏览器上面（融为一体）
2、写入了第三个实参，则会脱离浏览器并且一个独立的小窗口，并且可以保存起来，设置为他绑定事件
3、宽高不能设置的太小了，有最小值
2、关闭窗口：window/newW.close();
3、修改窗口的大小：newW.resizeTo(new宽,new高);
4、修改窗口的位置：newW.moveTo(x,y);
浏览器一共提供了3种弹出框
1、警告框：alert();
2、用户输入框：var user=prompt("提示文字","默认值");
3、用户输入框：var bool=confirm("提示文字");
定时器：
1、周期性定时器
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer)
2、一次性定时器
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer)
注意：一次性和周星期底层都是一样的，甚至可以呼唤，所以你到底以后用哪个无所谓
面试题：函数 和 循环 和 定时器都能反复执行操作，区别？ - 时机
1、函数 - 用户触发、程序员调用
2、循环 - 一瞬间基本就结束了
3、定时器 - 等待一段时间做一次
history对象：
保存【当前窗口】的历史记录（打开【过】的url），可用于
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
*navigator对象：
保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号 - 类似于css hack（浏览器兼容性问题的，专门针对老IE），但是更强大，单独为老IE写js
属性：navigator.userAgent; - 能够得到一个字符串，包含着是什么浏览器以及版本号，想办法去拿到你需要的部分
HTML5（语义化标签、增强型表单、音频视频）和CSS3（过渡、动画、转换、媒体查询、阴影、弹性盒子、rem...）和ES5以上的任何东西，老IE都是不支持的，所以要做兼容
BOM确实有很多具有兼容性问题，但是我们不需要自己使用navigator去做兼容，前辈们帮我们已经做好了
***location对象：保存当前窗口【正在打开】的url
一个url网址由哪些部分组成 - 5部分
例
http://127.0.0.1:8020/bom02/new/03navigator%E5%AF%B9%E8%B1%A1.html?__hbt=1663118768002
协议名://域名:端口号/路由?请求消息
协议名：https、http、ftp、ws（直播）...
域名/主机号：底层大家都是主机号，域名是需要花钱购买的
端口号：默认端口可以省略不写，https默认端口为443，http默认端口为80
*文件的相对路径/路由：百度把他加密了隐藏起来了 - 决定着用户看到的是哪个网页
*查询字符串/请求消息：客户端发送到服务器端的东西，服务器端需要接住然后判断我们请求的是什么，才能进行响应 - 和后端进行沟通交流的关键点
目的：为了学习全栈开发而准备
获取这五个部分
我们可以通过location得到这个url的每一个部分，但是不要记忆，直接console.log输出location就能直接看到
协议名：location.protocal
域名：location.hostname
端口号：location.port
路由：location.pathname//重要
请求消息：location.search//重要
跳转
location="新url"
跳转后禁止后退：location.replace("新url");
刷新：location.reload();
event对象：事件对象
事件：用户触发的 或 浏览器自动触发的（onload）
绑定事件：3种
在HTML页面上绑定事件
<elem on事件名="js语句"></elem>
缺点：
1、不符合内容（html）与样式（css）与行为（js）的分离的原则
2、无法动态绑定事件（一次只能绑定一个元素）
3、无法同时绑定多个函数对象
**在js中使用元素的事件处理函数属性：
elem.on事件名=function(){
操作
}
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、*没有兼容性问题
缺点： 1、无法同时绑定多个函数对象 - 个人觉得其实不是缺点，为什么不把两个功能放到一起
使用专门的事件API绑定事件
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：
if(elem.addEventListener){
elem.addEventListener("事件名",callback); }else{
elem.attachEvent("on事件名",callback);
}
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、同时绑定多个函数对象
缺点： 1、具有兼容性问题
事件周期：
主流：3个阶段
1、捕获阶段，记录着要发生的事件有哪些
2、目标元素优先触发，目标元素->实际触发事件的元素
3、冒泡触发，向上触发所有的记录着的事件
老IE：2个阶段，没有捕获阶段
获取事件对象event：
主流：会自动作为事件处理函数的第一个形参传入
elem.on事件名=function(e){e->event}
老IE：
event;
兼容：
var e=event；//不光老IE可用，主流也可以用 - 小三上位
获取到event事件对象，我们可以干什么？
获取鼠标的坐标/位置
1、绑定事件：事件处理函数形参可以写一个e，自动获取到事件对象event - 明日的重点
2、获取坐标：3种
e.screenX/Y - 获取鼠标相对于屏幕的位置
e.clientX/Y - 获取鼠标相对于客户端/浏览器的位置
**e.pageX/Y - 获取鼠标相对于页面的坐标
应用：点不到的广告，鼠标跟随动画
鼠标跟随动画
1、事件window/document.onmousemove
2、js的加载速度比图片的加载速度快，加载事件：onload事件(加载完成)
3、删除图片，实在动画开始时开启了定时器
提前设置好图片的html和css（定位）
在window.onmousemove事件中渲染图片设置其绝对定位的位置
又在onload事件中设置你的动画和删除图片的定时器
阻止冒泡 - 笔试面试中：开发几乎不用
主流： e.stopPropagation()
老IE：
e.cancelBubble=true;
兼容：
e.cancelBubble=true; //不光老IE可用，主流也可以用 - 小三上位\
*事件委托/利用冒泡 - 笔试面试开发中
优化：如果多个子元素定义了相同 或 相似的事件，最好只给父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差
淘汰this：水性杨花，当前元素
认识一个目标元素：target：你点击的是哪一个，永远就是那一个
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement; //不光老IE可用，主流也可以用 - 小三上位 例
bigbox.onclick = function (e) {
var el = e.srcElement
if (el.nodeName == "BUTTON") {
//操作（nodeName是当前点击的冒泡元素的标签名）
}
}
阻止浏览器的默认行为：
a标签默认跳转页面，右键自带一个弹出框，F12打开一个控制台，F5会刷新
主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：e.returnValue=false; //不光老IE可用，主流也可以用 - 小三上位
新事件：
window.oncontextmenu=()=>{//鼠标右键事件}
window.onkeydown=()=>{//键盘事件 - 我们不做游戏开发}
获取键盘的键码：
e.keyCode; // 不需要去记忆键码，要么百度查看，要么直接输出查看
最后强调：1、BOM重要的只有两个：定时器 和 event
