JavaScript——03 BOM编程

简介: JavaScript——03 BOM编程

一.BOM的基本介绍

  • BOM(Borwser Object Model) 浏览器对象模型,它的核心对象是window。
  • BOM由一系列相关对象构成,并且每个对象都提供了很多方法和属性。
  • BOM缺乏标准,JavaScript语法的标准组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

二.BOM的构成

BOM笔DOM更大,BOM包含DOM。

  • window对象,是JS的最顶层对象,它具有双重角色。它是JS访问浏览器窗口的一个接口。也是一个全局对象。定义在全局作用域中的变量,函数都会变成Windows对象的属性和方法。其他的BOM对象都是window对象的属性  ,在调用的时候可以省略windows,对话框都属于windows对象方法,如alert(),prompt();
  • document对象,文档对象;
  • location对象,浏览器当前URL信息;
  • navigation对象,浏览器本身信息;
  • screen对象,客户端屏幕信息;
  • history对象,浏览器访问历史信息;

三.窗口加载事件

代码执行顺序是从上往下,所以在给一个按钮添加点击事件,要先设置按钮,然后获得按钮在进行操做

<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.onclick=function(){
    alert('您点了我一下');
}
</script>

如果想把点击事件放到页面前面,那就要通过窗口加载事件来完成,看小编操作吧!

window.onload 就是窗口加载事件,当文档内容完全加载完成就会调用此窗口事件

window.onload = function ( ){ }

或者

window.addEventListener("load",function(){});

那么第一种和第二种有什么区别呢????

  • window.onload只能写一次,如果有多个,则会以最后一个为准
  • 如果是window.addEventListener 则没有限制

如果有小伙伴不知道BOM和DOM的区别,请看下图 (* ̄︶ ̄)

目录
打赏
0
0
0
0
3
分享
相关文章
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
12 2
js中BOM中的方法
【10月更文挑战第31天】
提高JavaScript编程效率
提高JavaScript编程效率
47 3
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
37 2
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
64 0
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
52 1
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选

热门文章

最新文章