JS BOM浏览器对象模型

BOM浏览器对象模型

bom概述

• BOM(Browser Object Model) 即浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象的window
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
• BOM缺乏标准

---

DOM与BOM模型的对比

DOM	BOM
文档对象模型	浏览器对象模型
把文档当成一个 对象 来看待	把浏览器当成一个 对象 来看待
顶级对象的document	顶级对象的window
主要学习操作页面元素	学习的是浏览器窗口交互的一些对象
W3C标准规范	是浏览器厂商在各自浏览器上定义的，兼容性较差

window对象的浏览器的顶级对象

1.onload

1. 传统注册事件只能执行一次，以最后一次为准 window.onload = function(){}//不执行
   window.onload = function(){}//执行
2. addEventListener(‘’,function(){})注册事件可以没有限制的执行
   load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css等
   DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

window.addEventListener('load',function(){
            alert(22);
        })
        document.addEventListener('DOMContentLoaded',function(){
            alert(33);
        })//最先执行

    

---

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发事件
用window.onload可以把js代码写到页面元素的上方

2.定时器

一.setInterval

语法规范： window.setTimeout(调用函数, 延时时间);

1. 这个window在调用的时候可以省略

2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0

3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’

4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
   setTimeout(function() {
   console.log(‘时间到了’);

   }, 2000);

二、setInterval

语法规范： window.setInterval(调用函数, 延时时间)

setTimeout与setInterval的不同：

• setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
• setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

三、clearInterval清除定时器

clearInterval();

同步与异步

同步：同一时间做一件事，在主线程执行栈中
异步：同一时间干很多不同的事，在任务队列（消息队列）中
js执行机制：
1.先执行执行栈中的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环-eventloop：主线程不断的重复获得任务、执行任务再获取任务、再执行的机制

//记录浏览历史，所以可以实现后退功能
location.assign(‘http://www.itcast.cn’);
//不记录浏览历史，所以不可以实现后退功能
location.replace(‘http://www.itcast.cn’);
//相当于f5
location.reload(true);

history.go(1);//-1后退,1前进