JS总结之BOM

最新推荐文章于 2024-11-19 18:47:15 发布

张哈哈zhh

最新推荐文章于 2024-11-19 18:47:15 发布

阅读量199

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44383261/article/details/117401031

版权

本文介绍了window对象的load、DOMContentLoaded、onresize事件，展示了如何利用这些事件进行窗口尺寸变化下的元素隐藏。此外，还讲解了location对象、navigator对象和history对象的使用，以及setTimeout与setInterval的区别。

摘要由CSDN通过智能技术生成

DOM的顶级对象是document，BOM的顶级对象是window，BOM包含DOM。

1.window对象的常见事件：

onload事件
DOMContentLoaded事件

onload是等所有资源加载完毕触发，而DOMContentLoaded仅当DOM加载完成触发，不包括样式表、图片、flash等等，所以当两个事件同时出现时，DOMContentLoaded更快执行。（DOMContentLoaded有兼容性，IE9以上支持）

onresize事件

调整窗口大小加载事件。只要窗口大小发生变化，就会触发该事件，可以利用这个事件完成响应式布局。
当窗口宽度小于600px时隐藏div：

	<style type="text/css">
		#div{
			background-color: #0000FF;
			width: 200px;
			height: 200px;
		}
	</style>
<body>
	<div id="div"></div>
	<script type="text/javascript">
		var div=document.getElementById('div');
		window.addEventListener('resize',function(){
			if(window.innerWidth<=600){
				div.style.display='none'
			}
		})
	</script>
</body>

setTimeout()和setInterval()

window.setTimeout(回调函数，[延迟的毫秒数])；
设置一个定时器，该定时器在到期之后执行回调函数。延迟省略默认是0。
停止定时器：window.clearTimeout(timeoutID);
window.setInterval(回调函数，[延迟的毫秒数])；
setInterval()方法与setTimeout的区别是，setInterval每隔一段时间，就调用一次回调函数，而setTimeout只执行一次回调函数。
清除定时器：window.clearInterval(timeoutID);

2.location对象

window对象提供了一个location属性，用于获取或设置窗体的url，并且可以用于解析url，因为这个属性返回的是一个对象，所以也称这个属性为location对象。
location对象的属性：

location.href：获取或者设置整个url
location.host：返回主机域名
location.port：返回端口号，如果没有，返回空字符串
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段（#后边的内容）

location.search获取url参数：

<script type="text/javascript">
	const a=window.location.search;
	console.log(a);//?username=123
	const b=a.substr(1);
	console.log(b)//username=123
	var arr=b.split('=');//Array [ "username", "123" ]
	console.log(arr)
	document.getElementById('div').innerHTML=arr[1];//123
</script>