BOM相关操作详解

Laurie ·

更新时间:2024-09-20

· 784 次阅读

BOM相关操作详解 window的方法全局函数

alert() /confirm()/ prompt() 这三个都会阻塞代码后两个有返回值

window的常用子对象 location

location.href
如果不加上对应的协议只会更改一级的字符串

location.href="www.baidu.com"

在这里插入图片描述
如果添加了相应的协议，就可以直接跳转到改地址

location.href="https://www.baidu.com"

在这里插入图片描述
ocation.reload()刷新
location.reload(true)底层刷新

window.onclick = function(){
location.reload();
}

此时点击页面空白部分，页面便会刷新。
在这里插入图片描述

history 前进后退的一些历史

history.go(-1/+1)
history.back() 即history.go(-1)
history.forward() 即history.go(+1)

window.onclick = function(){
history.go(+1)
}

此时随意点击页面空白部分，就会跳转到刚才前进过的网址。
在这里插入图片描述

history.length查看地址个数

console.log(history.length) ;

因为刚才一共有两个网页的跳转，所以history.length为2
在这里插入图片描述

navigator 嗅探功能

navigator.userAgent 查看当前浏览器版本

console.log(navigator.userAgent) ;

在这里插入图片描述

window的事件 onload 当浏览加载结束之后，包括图片的加载，文档资源的加载，必须全部加载结束,才会调用

当不写onload的时候，图片还没有加载完成，所以获取不到图片宽度。


console.log(img.width);

在这里插入图片描述
当把这句代码写入onload时，就会在页面加载之后执行，此时就可以获取到图片宽度。


window.onload = function(){
console.log(img.width)
}

在这里插入图片描述

onscroll 拖动滚动条触发此事件

当滚动条滚动触发事件，输出“滚动条滚动了”。


window.onscroll = function(){
console.log("滚动条滚动了")
}

在这里插入图片描述

onresize 窗口变化


window.onresize = function(){
var boxele = document.getElementById("box");
boxele.style.backgroundColor="yellow";
}

当页面的尺寸发生了变化，方框由无色变为黄色。

在这里插入图片描述

scrollTop卷动高度

document.body.scrollTop(谷歌)
document.documentElemen.scrollTopt（IE）
使用document.body.scrollTop||document.documentElement.scrollTop解决兼容问题
对于失败的获取会取值为0
对于成功的获取会取值为非0


window.οnscrοll=function(){
var scrolltop = document.body.scrollTop||document.documentElement.scrollTop;
console.log(scrolltop);
}

当滚动条滚动时，输出页面卷动高度。
在这里插入图片描述

scrollTo 将页面滚动至指定位置 1.scrollTo(0,0);


window.οnclick=function(){
scrollTo(0,0);
}

点击浏览器空白部分，浏览器会回到顶部。
在这里插入图片描述

2.scrollTo({top:0,behavior:“smooth”})


window.οnclick=function(){
scrollTo({
top:0,
behavior:"smooth"
});
}

效果如上，但是有了behavior设置的运动效果，但是behavior有兼容性问题。

3.document.body.scrolltop=0,document.documentElement.scrolltop=0


window.οnclick=function(){
document.body.scrolltop=0
document.documentElement.scrolltop=0
}

效果如上，并且此方法可以解决兼容问题。

BOM操作总结

1.BOM操作是浏览器相关操作，是浏览器自带的API。
2.浏览器中的提示框用alert() /confirm()/prompt() 实现，后两个有返回值。
3.浏览器页面跳转用location.href
4.浏览器页面刷新用location.reload
5.浏览器的前进后退用history.go(-1/+1)
6.如果有些功能想要在页面全部加载之后再执行，就用window.οnlοad= function(){}包住
7.如果有些功能想要在页面滚动的时候执行，就用window.onscroll = function(){}包住
8.如果有些功能想要在页面尺寸改变的时候执行，就用window.onresize = function(){}包住
9.scrollTop是页面的卷动高度，可以用来实现JS操纵绝对定位。
10.scrollTo 是页面滚动至指定位置，可以用来实现回到顶部按钮。

作者：SpongeBooob

bom

1024 个赞