BOM 总结介绍

简介: BOM 总结介绍

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>


相关文章
|
NoSQL Java 程序员
极速体验编译openjdk8(docker环境)
在docker环境下,用最少的步骤把openjdk8源码编译构建成jdk
1300 0
极速体验编译openjdk8(docker环境)
|
消息中间件 安全 API
记项目的一次发送短信及短信模板配置分享
我们日常使用的软件或者网站,大部分都在使用短信业务,比如 注册 、 验证码功能 。还有一些特定的业务需要发送短信通知国内外用户等。有了需求就会有平台提供服务,国内有很多互联网公司都提供短信业务,比如阿里云、腾讯云、七牛。本次我们主要讲解的是阿里云提供的短信服务。
记项目的一次发送短信及短信模板配置分享
|
XML JSON 缓存
深入理解RESTful API设计原则与实践
在现代软件开发中,构建高效、可扩展的应用程序接口(API)是至关重要的。本文旨在探讨RESTful API的核心设计理念,包括其基于HTTP协议的特性,以及如何在实际应用中遵循这些原则来优化API设计。我们将通过具体示例和最佳实践,展示如何创建易于理解、维护且性能优良的RESTful服务,从而提升前后端分离架构下的开发效率和用户体验。
|
测试技术
软件复杂度量化:McCabe度量法及其环路复杂度的计算方法
McCabe度量法(McCabe&#39;s Cyclomatic Complexity)是一种经典的方法,用于度量软件程序的复杂度。通过计算程序中独立路径的数量,帮助开发人员评估代码的维护难度和测试覆盖率。本文详细介绍了McCabe度量法的原理、计算方法及其在实际应用中的作用。
2659 0
|
SQL 运维 NoSQL
【Redis 故障排查】「连接失败问题排查和解决」带你总体分析CPU及内存的使用率高问题排查指南及方案
【Redis 故障排查】「连接失败问题排查和解决」带你总体分析CPU及内存的使用率高问题排查指南及方案
551 0
[虚幻引擎 UE5] EditableText(单行可编辑文本) 限制只能输入数字并且设置最小值和最大值
本蓝图函数可以格式化 EditableText 控件输入的数据,让其只能输入一定范围内的整数。
883 0
|
机器学习/深度学习 数据采集 数据可视化
Python在数据分析中的关键作用
【2月更文挑战第10天】随着数据规模的不断增长,数据分析在各行各业中变得越来越重要。而Python作为一种简单易学、功能强大的编程语言,正逐渐成为数据分析师的首选工具。本文将介绍Python在数据分析中的关键作用,并讨论其在数据收集、清洗、可视化和建模等方面的应用。
137 0
|
存储 消息中间件 SQL
一文读懂大数据实时计算(二)
本文分为四个章节介绍实时计算,第一节介绍实时计算出现的原因及概念;第二节介绍实时计算的应用场景;第三节介绍实时计算常见的架构;第四节是实时数仓解决方案。
1141 0
一文读懂大数据实时计算(二)
|
测试技术 数据安全/隐私保护 监控

热门文章

最新文章