黑马程序员-JS基础-BOM浏览器对象模型

最新推荐文章于 2024-05-20 15:17:08 发布

Xylia Lu

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量624

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_65549185/article/details/127889201

版权

BOM

(browser object model)提供了独立于内容，而与浏览器窗口进行交互的对象，并未=为每个对象提供了很多方法和属性；

BOM比DOM更大，它的顶级对象是window；

构成：document、location、navigation、screen、history；

window对象的常见事件

1.窗口加载事件

window.onload =fn;

window.addEventListener('load', fn）

等页面全部加载完（包含页面dom元素图片 flash css 等）再处理执行函数，所以可以把它写在js代码最上方；

document.addEventListener('DOMContentLoaded', fn）

是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

window.addEventListener('load', function() {

var btn = document.querySelector('button');

btn.addEventListener('click', function() {

alert('点击我');

})

})

window.addEventListener('load', function() {

alert(22);

})

document.addEventListener('DOMContentLoaded', function() {

alert(33);

})

//先后弹出的是33、22、点击我

2.窗口大小变化事件

window.addEventListener('resize', fn）；

window.οnresize=fn；

只要窗口大小发生变化，就会执行fn语句；

window.innerWidth为当前屏幕的宽度；

定时器

	类型	说明
定义	window.setTimeout ( fn, 时间)	时间到了自动触发，window可省略
定义	window.setInterval (fn,间隔时间)	每隔一段时间触发一次，window可省略
清除	window.clearTimeout(定时器名字)	window可省略
清除	window.clearInterval(定时器名字)	window可省略

通常可以先定义好fn，再调用定时器函数；

页面中可能有很多的定时器，我们通常给定时器申名；

function callback() {

console.log('爆炸了');

}

var timer1 = setTimeout(callback, 3000);

var timer2 = setTimeout(callback, 5000);

location对象

属性或方法	说明
location.href	设置或返回完整的 URL
location.host	设置或返回主机(域名) www.baidu.com
location.port	设置或返回当前 URL 的端口号，没有就返回空字符串
location.pathname	返回路径
location.hostname	返回当前 URL 的主机名
location.search	返回参数，即从问号 (?) 开始的 URL
location.hash	返回从井号 (#) 开始的 URL，没有就返回空字符串
location.protocol	返回当前 URL 的协议，取值为 'http:','https:','file:' 等等
location.assign（）	跳转页面
location.replace（）	替换当前页面（不记录历史，所以无法后退页面）
location.reload（）	重新加载页面，相当于刷新页面