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>


相关文章
|
19天前
|
人工智能 前端开发 小程序
26 年最新 AI 编程学习路线一条龙,5 分钟速通!
小白可懂的 AI 编程学习路线,6 个阶段从入门到进阶,覆盖 Cursor、Claude Code、Codex 三大主流工具,提示词工程、上下文管理、项目部署全流程,配套免费教程和实战项目。
344 0
|
10月前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
790 12
|
4月前
|
人工智能 Linux API
新手零门槛搭建OpenClaw龙虾智能体:阿里云本地/一键/手动部署+免费模型API配置智能
2026年,OpenClaw(Clawdbot)作为开源可自托管的AI执行框架,已经成为普通用户搭建自动化数字助理的主流方案。它能够实现文件处理、文档解析、网页检索、任务自动化、多智能体协同等能力,并且支持私有化部署,数据与交互记录完全保留在自有设备或服务器中,满足隐私与安全需求。
928 1
|
10月前
|
人工智能 搜索推荐 算法
唯品会 API 开启唯品会店铺精准营销新策略
在竞争激烈的电商市场中,唯品会作为领先的折扣平台,通过API技术助力商家实现精准营销。API为商家提供用户行为、商品与交易数据,支撑用户画像、个性化推荐、动态定价、跨渠道营销与库存预测等策略,提升转化率与用户忠诚度,推动销售增长与营销智能化升级。
|
分布式计算 大数据 数据处理
经典大数据处理框架与通用架构对比
【6月更文挑战第15天】本文介绍Apache Beam是谷歌开源的统一数据处理框架,提供可移植API,支持批处理和流处理。与其他架构相比,Lambda和Kappa分别专注于实时和流处理,而Beam在两者之间提供平衡,具备高实时性和数据一致性,但复杂性较高。选择架构应基于业务需求和场景。
1174 3
经典大数据处理框架与通用架构对比
|
机器学习/深度学习 监控 算法
目标检测算法技术
8月更文挑战第11天
|
JavaScript
Nodejs的cnpm包管理器快速入门
介绍Node.js的cnpm包管理器,包括cnpm的实现原理、如何安装cnpm、使用cnpm安装软件包,以及Node.js搜索包的流程。
622 2
Nodejs的cnpm包管理器快速入门
|
供应链 安全 Shell
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

热门文章

最新文章