BOM
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等
BOM的顶级对象window
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name
function f1() { console.log("我堂堂 window 也是醉了"); } window.f1(); 因为页面中的所有内容都是window的,所以window在写的时候是可以省略的.
- 我自己的理解:浏览器中有个顶级对象:window----皇帝
- 页面中顶级对象:document-----皇宫大总管
- 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的
- 变量是window的
对话框
- alert()
- prompt()
- confirm()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> window.alert("先生您好");//以后不用,测试的时候使用 window.prompt("请输入您的小帐号"); var result=window.confirm("您确定退出吗啊 是吧!?"); console.log(result); </script> </head> <body> <p>我是一个p标签</p> </body> </html>
页面加载事件
当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
页面加载的时候,按钮还没出现,页面还没有加载完毕
页面加载完毕了,再获取按钮
onload=function () { document.getElementById("btn").onclick=function () { alert("您好,页面加载完了,有我了"); }; }; 扩展的事件---页面关闭后才触发的事件 window.onunload=function () { alert("我是关闭之后才触发的 有我你也看不到"); }; 扩展事件---页面关闭之前触发的 window.onbeforeunload=function () { alert("我是关闭之前才触发的"); };
定时器
https://blog.csdn.net/weixin_45525272/article/details/108143608
location对象
https://blog.csdn.net/weixin_45525272/article/details/108104533
history对象
back()
forward()
go()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="回退" id="btn1"/> <input type="button" value="前进" id="btn2"/> <script src="common.js"></script> <script> //回退 my$("btn1").onclick = function () { window.location.href = "15test.html"; }; //前进 my$("btn2").onclick = function () { window.history.forward(); }; </script> </body> </html>
navigator对象
- serAgent
通过userAgent可以判断用户浏览器的类型
- platform
通过platform可以判断浏览器所在的系统平台类型.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> // 通过userAgent可以判断用户浏览器的类型 console.log(window.navigator.userAgent); //通过platform可以判断浏览器所在的系统平台类型. console.log(window.navigator.platform); </script> </head> <body> </body> </html>