韩顺平 javascript教学视频_学习笔记25_bom介绍_dom对象层次图_dom对象（window对象1）

本文链接：https://blog.csdn.net/fuyizhonhong/article/details/50723588

本文介绍了浏览器对象模型(BOM)的基本概念，包括Window、Document、Location等核心对象的作用及使用方法，并深入探讨了Window对象的常见应用。

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

内容介绍

Bom 介绍----浏览器对象模型

因为做浏览器的厂商比较多，浏览器也应该有一个规范，这是W3C又出来了，制订了一个做浏览器规范。

bom提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）。

文档结构图

BOM由一系列相关的对象组成。下图展示了基本的BOM体系结构。

BOM中的对象

Window对象：

是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。Window对象表示整个浏览器窗口，但不必表示其中包含的内容。

Document对象：

实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。

Location对象：

它是window对象和document对象的属性。Location对象表示载入窗口的URL，此外它还可以解析URI.

Navigator对象：

Navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽相同。

Screen对象：

通过其可以获取用户屏幕相关的信息

dom对象简介

下面开始讲重点，先讲window对象

dom对象详解----window对象

在使用window对象的方法和属性时，可以不带window，不带window就是默认为window。

window对象的常用方法1：

confirm()方法

function test(eventObj){ //confirm方法
				
	var res=window.confirm("你确定要删除吗？");
	if(res)
	{
		window.alert("删除成功");
	}else {
		window.alert("取消删除");
	}
}

setInterval()方法和 clearInterval()方法

setInterval()函数可以根据指定的时间，循环执行某个函数，或者表达式

clearInterval() 方法可取消由 setInterval() 设置的 timeout

看一个案例：

<html>  
	<head>  
		<script language="javascript">  
 
			function showTime(){ 
				
					document.getElementById("mytime").innerText=new Date().toLocaleString();
			}
			setInterval("showTime()",1000);
			
			//让图片动起来
			var n=0;
			var count=0;
			function runphoto()
			{
				count++;
				if(count==10){
					clearInterval(mytimer);
				}
				var myimg=document.getElementById("myimg");
				myimg.src=((n++%4)+1)+".png";
			}
			var mytimer=setInterval("runphoto()",500);
		</script>  
		
	</head>  
	<body > 
	<span id="mytime"></span>
	<img src="1.png" id="myimg"></img>
	</body>  
</html>

setTimeout() 和 clearTimeout() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只调用一次

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout

<html>  
	<head>  
		<script language="javascript">  
 
			//让图片循环动起来
			var n=0;
			var count=0;
			function runphoto()
			{
				count++;
				if(count==10){
					clearInterval(mytimer);
					setTimeout("reRun()",2000);
					count=0;
				}
				var myimg=document.getElementById("myimg");
				myimg.src=((n++%4)+1)+".png";
			}
			var mytimer=setInterval("runphoto()",500);
			
			function　reRun(){
				
				mytimer=setInterval("runphoto()",500);
			}
		</script>  
		
	</head>  
	<body > 
	<span id="mytime"></span>
	<img src="1.png" id="myimg"></img>
	</body>  
</html>