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>


相关文章
|
8天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。
3478 20
|
20天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
18086 60
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
1天前
|
SQL 人工智能 弹性计算
阿里云发布 Agentic NDR,威胁检测与响应进入智能体时代
欢迎前往阿里云云防火墙控制台体验!
1158 2
|
4天前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
1924 8
|
16天前
|
人工智能 JavaScript Ubuntu
低成本搭建AIP自动化写作系统:Hermes保姆级使用教程,长文和逐步实操贴图
我带着怀疑的态度,深度使用了几天,聚焦微信公众号AIP自动化写作场景,写出来的几篇文章,几乎没有什么修改,至少合乎我本人的意愿,而且排版风格,也越来越完善,同样是起码过得了我自己这一关。 这个其实OpenClaw早可以实现了,但是目前我觉得最大的区别是,Hermes会自主总结提炼,并更新你的写作技能。 相信就冲这一点,就值得一试。 这篇帖子主要就Hermes部署使用,作一个非常详细的介绍,几乎一步一贴图。 关于Hermes,无论你赞成哪种声音,我希望都是你自己动手行动过,发自内心的选择!
3176 29
|
3天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro,跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
1545 3
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病