本篇文章给大家带来了关于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>