BOM浏览器对象模型整理解析

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于BOM浏览器对象模型的相关问题,包括了windows对象的常见事件、定时器、js执行机制等等内容,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、web前端】

1、BOM 概述

1.1 什么是 BOM

BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心 对象是 window。

BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

DOM:

1.文档对象模型

2.DOM 就是把「文档」当做一个「对象」来看待

3.DOM 的顶级对象是 document

4.5.DOM 主要学习的是操作页面元素

DOM 是 W3C 标准规范

BOM:

1.浏览器对象模型

2.把「浏览器」当做一个「对象」来看待

3.BOM 的顶级对象是 window

4.BOM 学习的是浏览器窗口交互的一些对象

5.BOM 是浏览器厂商在各自浏览器上定义的 ,兼容性较差

1.2 BOM 的构成

BOM 比 DOM 更大,它包含 DOM

1. 它是 JS 访问浏览器窗口的一个接口。

2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window,前面学习对话框都属于 window 对象方法,如 alert()prompt()等。

3.注意:window下的一个特殊属性 window.name

2. window 对象的常见事件

2.1 窗口加载事件

(1)window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

代码演示:

<style>         .box {             width: 100px;             height: 100px;             background-color: pink;         }     </style> </head>  <body>     <script>         // window.onload = function () {};         // 在页面元素全部加载完毕后         window.addEventListener("load", function () {             var box = document.querySelector('.box');             box.onclick = function () {                 box.style.backgroundColor = 'red';             };         });     </script>      <p class="box"></p> </body>

商匡云商
Logo
注册新帐户
对比商品
  • 合计 (0)
对比
0
购物车