BOM
BOM概述
什么是BOM
BOM是浏览器对象模型(Browser Object Model)的简称,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3c,BOM最初是Netscript浏览器标准的一部分。
DOM和BOM的区别:
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM是把文档当做一个对象 | BOM把浏览器当做一个对象来看待 |
DOM的顶级对象是document | BOM的顶级对象是window |
DOM主要学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
DOM是w3c标准规范 | BOM是浏览器厂商在各自浏览器上定义的,兼容性较差 |
BOM构成
- Window对象是浏览器的顶级对象,它具有双重角色
- Window对象是js访问浏览器窗口的一个接口
- Window对象是一个全局对象,定义在全局作用域中的变量函数都会变成window对象的属性和方法,在调用的时候可以省略window
window对象
window
对象:是BOM中所有对象的核心,同时也是BOM中所有对象的父对象。定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。
定义在全局作用域中的getArea()
函数,函数体内的this关键字指向window对象。
对于window对象的属性和方法在调用时可以省略window,直接访问其属性和方法即可。
窗口加载事件
window.onlode = function(){}
window.addEventListener("load",function(){});
window.onload的是窗口页面加载事件当文档内容完全加载完成会触发该事件,包括图像、脚本文件、css文件等。
ps:
- 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕, 再去执行处理函数
- window.onload传统注册事件方式只能写一次 , 如果有多个,会以最后一个window.onload 为准
- 如果使用addEventListener则没有限制
document.addEventListener('DOMContentLoaded',function(){})
- 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。
- 如果页面的图片有很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适。
代码举例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
window.addEventListener ('load' ,function () {
var btn = document.querySelector ('button') ;
btn.onclick = function () {
alert('on