BOM浏览器对象模型

bom概述

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

DOM与BOM模型的对比

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

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

1.onload

传统注册事件只能执行一次，以最后一次为准 window.onload = function(){}//不执行
window.onload = function(){}//执行
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(调用函数, 延时时间);

这个window在调用的时候可以省略
这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
这个调用函数可以直接写函数还可以写函数名还有一个写法 ‘函数名()’
页面中可能有很多的定时器，我们经常给定时器加标识符（名字)
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前进

JS BOM浏览器对象模型相关推荐

JS BOM 浏览器对象模型
1 body> 2 <input type="button" value="go" οnclick="star()" /> ...
JavaScript（七）—— BOM 浏览器对象模型
本篇为 JavaScript 系列笔记第七篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
BOM——浏览器对象模型
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM 由多个 ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
Javascript的HTML BOM(浏览器对象模型)
Javascript的HTML BOM(浏览器对象模型) 一.Window 对象浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". Browser O ...
BOM浏览器对象模型(Browser Object Model)
文章目录一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
BOM——浏览器对象模型（1）
BOM-浏览器对象模型 BOM概述 1.1 BOM概述 DOM与BOM的比较 1.2 BOM的构成 window对象的常见事件 2.1窗口加载事件 2.2调整窗口大小事件定时器 3.1 setTim ...
JavaScript - WebAPI - BOM浏览器对象模型
1.1-BOM与DOM介绍 JavaScript语言由三部分组成 ECMAJavaScript:定义了js的语法规范 Dom:document object model文档对象模型:一个HTML文档中 ...
JavaScript基础——BOM浏览器对象模型
目录 Window Navigator Location History Screen 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话".BOM可以使我 ...

JS BOM浏览器对象模型