BOM属性、方法、事件应用案例

最新推荐文章于 2022-11-26 11:17:11 发布

小李同学a

最新推荐文章于 2022-11-26 11:17:11 发布

阅读量597

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/LYN_1217/article/details/125396816

版权

本文详细介绍了BOM（浏览器对象模型），重点讲解了window对象的常用属性如screen、history、location和navigator，以及常用方法如confirm、alert和prompt，并探讨了window对象的onload、onresize和onscroll事件。此外，还讨论了数据持久化的三种方式：localStorage、sessionStorage和cookie及其使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是BOM？

BOM：Browser Object Model (浏览器对象模型)。
提供了独立于内容与浏览器窗口进行交互的对象。

二、window对象的常用属性

1.window.screen

屏幕对象，获取屏幕相关信息
screen,可以不写window
属性:
width 宽度
height 高度
availWidth 屏幕可用宽度
availHeight 屏幕可用高度，不包括任务栏
代码

	console.log(screen.width, screen.height);
	console.log(screen.availWidth,screen.availHeight);

效果
在这里插入图片描述

2.history对象

history:历史记录
history.back():回退
history.forword():前进
history.go(偏移量 delta)，从当前位置前进或者后退，0代表刷新。
效果
注：前进、后退只有在图标亮起时可以使用。

3.location

location：页面地址栏中所有信息
location.protocol：协议 (https/http)
location.hostname：主机IP
location.port：端口
location.pathname：资源路径 (端口后面？前面)
location.search：？开始内容
location.hash 获取#开始内容
location.href 获取修改地址信息
location.reload() 刷新
效果

4.navigator

浏览器相关
navigator.userAgent：用户代理标识用户身份(浏览器类型每一个浏览器ua都不一样的)
效果

三、window对象的常用方法

1.confirm：警告框

代码

var bool=window.confirm("确定删除吗？");
console.log(bool);

效果
确定是true，取消是false
在这里插入图片描述

2.alert：弹出框

代码

window.alert("弹窗警告!");

效果
在这里插入图片描述

3.prompt：输入框

代码

var num=prompt("请输入年龄","26")	//26是默认输入
console.log(num);

效果
在这里插入图片描述

四、window对象的常用事件

1.onload

window.onload()：浏览器资源加载完毕自动调用
页面所有标签加载成功或者失败

代码

window.onload=function(){
	console.log("加载成功");
}

效果
在这里插入图片描述

2.onresize

window.onresize()：页面大小改变了自动触发
代码

window.onresize=function(){
	console.log("页面大小改变了");
}

效果

在这里插入图片描述

3.onscroll

window.onscroll()：滚动条滚动时自动触发
window.scrollY()：滚动条在垂直方向的值
代码

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

效果图
在这里插入图片描述

五、数据持久化

1.localStorage

localStorage ：永久存储，浏览器不卸载，数据还在
setItem(key,value);设置
var value =getItem(key);获取
removeItem(key);删除
clear();清空
效果

2.sessionStorage

sessionStorage：会话存储，浏览器不关闭，数据都在
setItem(key,value);设置
var value =getItem(key);获取
removeItem(key);删除
clear();清空
效果

3.cookie

cookie：有有效期的持久化存储，可以自定义时间
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
			var now = new Date();
			now.setDate(now.getDate()+7);
			document.cookie="name=qiku;expires="+now.toGMTString();
		</script>
	</body>
</html>