Web APIs学习【三】（BOM对象，JS执行机制）

最新推荐文章于 2022-02-10 22:13:50 发布

VIP文章 greenhand coder

最新推荐文章于 2022-02-10 22:13:50 发布

阅读量258

点赞数 2

分类专栏：前端学习笔记文章标签： js javascript 队列

本文链接：https://blog.csdn.net/qq_43249043/article/details/109106251

版权

文章目录

- 1.BOM浏览器对象模型

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

BOM(Browser Object Model)即浏览器模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其对象核心是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性
BOM缺乏标准（js有ECMA DOM有W3C），由厂商在各自浏览器上定义
BOM把浏览器当作一个对象来看

1.1.2 BOM的构成

BOM 比 DOM 更大它包含 DOM
window（document，location，navigation，screen，history）
window 对象是浏览器的顶级对象，它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域中的变量，函数都会变成 window 对象的属性和方法在调用的时候可以省略 window ，前面学习的对话框都属于 window 对象方法如 alert()、prompt()等

注意：window 下的一个特殊属性 window.name，不要随意定义name变量

1.1.3 BOM和DOM对比

BOM

浏览器对象模型
把浏览器当作一个对象来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

DOM

文档对象模型
DOM 把文档当作一个对象来看待
DOM的顶级对象是document
DOM主要学习的是操作页面元素
DOM是W3C标准规范

1.2 window对象的常用事件

1.2.1 窗口加载事件

window.onload 窗口加载事件，当文档内容完全加载会触发该事件（包括图像、flash、CSS)
DOMContentLoaded 当DOM加载完成时触发（不包括图片，flash,css等）
window.onload 传统注册事件方式只能写一次，如果有多个，以最后一个为准，但使用addEventListener 则没有限制

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.addEventListener('load', function () {
    
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
    
        alert('button clicked');
      })
    })
    window.addEventListener('load', function () {
    
      alert('load 触发');
    })
    document.addEventListener('DOMContentLoaded', function () {
    
      alert('DOMContentLoaded 触发');
    })
    // alert DOMContentLoaded 触发 => alert load触发 => 点击按钮 => alert button

最低0.47元/天解锁文章

greenhand coder

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Web APIs学习【三】（BOM对象，JS执行机制）

1.BOM浏览器对象模型1.1 BOM概述1.1.1什么是BOMBOM(Browser Object Model)即浏览器模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其对象核心是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性BOM缺乏标准（js有ECMA DOM有W3C），由厂商在各自浏览器上定义BOM把浏览器当作一个对象来看1.1.2 BOM的构成BOM 比 DOM 更大它包含 DOMwindow（document，location，n
复制链接

扫一扫