分享

BOM 总结介绍

 流楚丶格念 2022-01-14

文章目录

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>

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多