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的区别,请看下图 (* ̄︶ ̄)

相关文章
|
1月前
|
前端开发 JavaScript
快乐编程之旅:了解这20道JavaScript手写题助力提升开发内力
快乐编程之旅:了解这20道JavaScript手写题助力提升开发内力
|
1月前
|
前端开发 Ruby
编程笔记 html5&css&js 054 CSS默认值
编程笔记 html5&css&js 054 CSS默认值
24 4
|
1月前
|
缓存 前端开发 JavaScript
【面试题】4月面经 前端常考JS编程题
【面试题】4月面经 前端常考JS编程题
|
22天前
|
缓存 JavaScript 前端开发
精通JavaScript修饰器:超越传统编程范式的进阶技巧
在JavaScript中,修饰器(Decorator)是一种特殊的语法,用于修改类、方法或属性的行为。修饰器提供了一种简洁而灵活的方式来扩展和定制代码功能。本文将详细介绍JavaScript修饰器的概念、语法和应用场景,并提供相关的代码示例。
|
22天前
|
JavaScript 前端开发 安全
TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!
TypeScript:扩展JavaScript数据类型,赋予编程更强大的表达能力!
|
22天前
|
存储 缓存 JavaScript
发掘JavaScript潜力:掌握高级技巧,成为JavaScript编程大师!
众所周知,JavaScript 是一种非常流行🔥的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事JavaScript编程的时候,我们却没有完全发掘和利用它的全部潜力。在本文中,我们将分享一些高级的JavaScript技巧,希望帮助CSDN的小伙伴更好地理解和掌握JavaScript编程。
|
28天前
|
资源调度 JavaScript 前端开发
jc-datetime :JavaScript 日期时间实用编程
jc-datetime :JavaScript 日期时间实用编程
156 1
|
1月前
|
存储 前端开发 JavaScript
深入理解 JavaScript 函数:提升编程技能的必备知识(下)
深入理解 JavaScript 函数:提升编程技能的必备知识(下)
深入理解 JavaScript 函数:提升编程技能的必备知识(下)
|
1月前
|
存储 前端开发 JavaScript
深入理解 JavaScript 函数:提升编程技能的必备知识(中)
深入理解 JavaScript 函数:提升编程技能的必备知识(中)
深入理解 JavaScript 函数:提升编程技能的必备知识(中)
|
1月前
|
存储 缓存 前端开发
深入理解 JavaScript 函数:提升编程技能的必备知识(上)
深入理解 JavaScript 函数:提升编程技能的必备知识(上)
深入理解 JavaScript 函数:提升编程技能的必备知识(上)

相关产品

  • 云迁移中心