BOM——window对象

BOM 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

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

BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是 W3C ，BOM 最初是 Netscape 浏览器标准的一部分。因为浏览器厂商太多，导致BOM 兼容性较差。

DOM

文档对象模型
DOM 就是把文档当作一个对象看待
DOM 的顶级对象是document
DOM 主要学习的是操作页面元素
DOM 是W3C 标准规范

BOM

浏览器对象模型
把浏览器当做一个对象看待
BOM 的顶级对象是window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM 比 DOM 更大，它包含DOM
window > document — location — navigation — screen — history

window对象是浏览器的顶级对象，它具有双重角色。

它是 Js 访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用时可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。

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

window对象的常见事件

窗口加载事件：window.οnlοad= function() { } || window.addEventListener(‘load’,function(){})；
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

注意

有了window.onload就可以把JS代码写在页面元素的上方，因为onload是等页面内容全部加载完毕，再取执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

document.addEventListener ( ’ DOMContentLoaded '，function（）{ } )
IE9 以上支持，DOMContentLoaded 是 DOM 加载完毕，不包含图片、False、CSS等就可以执行记载速度比 load 更快一些

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// window.onload = function() {//     var btn = document.querySelector('button');//     btn.addEventListener('click', function(e) {//         alert('click');//     })// };// 传统方式写第二次 不会有效果// window.onload = function() {//     alert(22);// };// addEventLister 不会影响window.addEventListener('load', function(e) {var btn = document.querySelector('button');btn.addEventListener('click', function(e) {alert('click');});});window.addEventListener('load', function(e) {alert(11);});window.addEventListener('DOMContentLoaded', function(e) {alert(33);});// load 等页面全部元素加载完毕，包含页面DOM元素，图片 Flash CSS 等// DOMContentLoaded 是 DOM 加载完毕，不包含图片、False、CSS等就可以执行 记载速度比 load 更快一些</script><button>click</button>
</body></html>

调整窗口大小事件：window.onresize = function() { } || window.addEventListener( ’ resize '，function() { } )
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

注意

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><script>window.addEventListener('DOMContentLoaded', function() {var div = document.querySelector('div');window.addEventListener('resize', function() {console.log(window.innerWidth);console.log('变化了');// if (window.innerWidth <= 1000) {//     div.style.display = 'none';// } else {//     div.style.display = 'block';// }})})</script><div></div></body></html>

window提供的两种定时器

setTimeout
window.setTimeout(调用函数、[ 延迟的毫秒数 ])；
setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
定时器中的函数是 回调函数，异步执行，类似的还有绑定事件时的函数也回调函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// window.setTimeout(调用函数(回调函数 callback)，延时事件);// 1.这个window在调用时可以省略// 2.延时时间是毫秒  但是可以省略  省略默认是 0 // 3.这个调用函数可以直接写函数， 还可以写 函数名// 4.页面中可能会有很多定时器，经常给定时器加标识符（名字）var timer1 = setTimeout(function() {console.log('Time out!');}, 3000);var timer2 = setTimeout(fn, 3000);function fn() {console.log('时间到！');};</script>
</body></html>

清楚定时器 window.clearTimeout(timeoutID)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button>停止定时器clearTimeout</button><script>var btn = document.querySelector('button');setTimeout(function() {console.log('时间到！');}, 3000)btn.addEventListener('click', function() {clearTimeout();})</script>
</body></html>

setInterval
window.setInterval(回调函数，[ 间隔的毫秒数 ])；
setInterval()方法重复调用一个函数，每次间隔时间，就调用一次回调函数
清楚定时器：window.clearInterval();

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button class="start">开启Interval</button><button class="stop">停止Interval</button><script>// 开启定时器 停止定时器var start = document.querySelector('.start');var stops = document.querySelector('.stop');// 定义一个空的全局变量var timer = null;start.addEventListener('click', function() {timer = setInterval(function() {console.log('TIME OUT!');}, 500);});stops.addEventListener('click', function() {clearInterval(timer);});</script>
</body></html>

案例：倒计时

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="time"><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 案例：倒计时// 1.获取元素var h = document.querySelector('.hour');var m = document.querySelector('.minute');var s = document.querySelector('.second');var inputTime = +new Date('2021-4-1 22:00:00'); // 返回的是用户输入时间总的毫秒数countDown()// 2.开启定时器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回当前时间总的毫秒数var times = (inputTime - nowTime) / 1000; // times 是剩余时间 总的毫秒数 var hours = parseInt(times / 60 / 60 % 24); // hourhours = hours < 10 ? '0' + hours : hours;h.innerHTML = hours;var minutes = parseInt(times / 60 % 60); // minute minutes = minutes < 10 ? '0' + minutes : minutes;m.innerHTML = minutes;var seconds = parseInt(times % 60); // secondseconds = seconds < 10 ? '0' + seconds : seconds;s.innerHTML = seconds;}</script>
</body></html>

BOM——window对象相关推荐

js bom window对象
一.全局作用域我们全局作用域定义了一个变量name,window对象下也能访问,证明在全局作用域下定义的变量,会自动纳入window对象. var name = "Bob";co ...
APIS（BOM）——Window对象、本地存储
Window对象 BOM Window对象定时器-延时函数 js执行机制同步任务异步任务执行机制 location对象 navigator 对象 histroy 对象本地存储本地存储分类 ...
前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
BOM之window对象
1.widonws对象介绍 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
BOM的window对象的属性及其方法
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
BOM：window对象的方法之定时器setTimeout()和停止setTimeout()定时器
window对象提供了两个好用的方法:定时器,分别是: - setTimeout() - setInterval() window.setTimeout(调用函数,[延迟的毫秒数]); 毫秒数如果不写 ...
57 BOM之window对象——定时器
文章目录 1.间隔性定时器与延时性定时器的区别间隔型定时器 `setInterval(fun,time)` 延时型定时器 `setTimeout(fun,time)` 2.如何停止定时器(取消定时器 ...
BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...

BOM——window对象

BOM——window对象相关推荐

最新文章

热门文章