DOM：

文档对象——整个文档对象：你整个页面里的所有标签：body div等

——dom操作：获取对象创建对象删除对象操作对象：属性

BOM：

在这里插入图片描述

BOM：Browse Object …

浏览器对象——widow：

历史地址栏文档对象本身

window.document.****…

动作：打开一个新的页面 alert prompt

一.什么是BOM

BOM：浏览器对象模型—Window

浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

在这里插入图片描述

WIndow的一些行为：alert prompt comfirm open:打开一个新界面 setInteval SetTimeOut——主要是操作窗口

window的属性：

history历史

location地址栏

document：文档——主要操作标签

event:事件对象——

二 Window对象的常用属性

status	设置或获取位于窗口底部状态栏的信息
screen	包含关于客户屏幕和渲染能力的信息
history	包含了用户已浏览的 URL的信息
location	包含关于当前 URL的信息
document	代表给定浏览器窗口中的 HTML文档
event	代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态

三常用方法

alert	显示自定义消息的对话框
confirm	显示确认对话框
prompt	显示输入对话框
showModalDialog	创建模式对话框：不好看；兼容不好
setTimdeout	经过指定毫秒值后计算表达式，并返回该事件对象
setInterval	每过一定时间间隔调用一次指定函数
open	打开新窗口并装入给定 URL的文档：新打开一个窗口，showModalDialog更丑。
close	关闭当前浏览器窗口

<body>
<p οnclick="alert('这是一个警告框')">alert警告框</p>
<p id="p1">录入框</p>
<p id="p2">提示框</p>
<p id="p3">open</p>
<p id="p4">close</p>
<script>
	document.getElementById("p1").οnclick=function(){
		var info=window.prompt("请输入测试信息")
		console.log(info);
	}
	document.getElementById("p2").οnclick=function(){
		var result=window.confirm("您确定要取钱？")
		console.log(result);//确定值为true  取消返回false
		if(result){
			alert("取");
		}else{
			alert("不取")
		}
	}
	var son;
	document.getElementById("p3").οnclick=function(){
		son=window.open("html01.html");//是当前界面的子界面_son就是一个window对象——打开的那个页面本身
	}
	document.getElementById("p4").οnclick=function(){
		 //close关闭的是当前
		 son.close();
		 
		 
	}
</script>
</body>

四.重点掌握的相关属性和方法

4.1 location属性：地址栏

href属性：可以直接获取地址栏信息；赋值可以更改

reload方法：重新加载当前页

replace方法：替换地址栏

<body>
<p id="pid">点击事件</p>
<a id="aid">点击事件</a><br/>
<a id="bid">刷新当前页</a>
<script>
	//location：地址栏：
	// 表单的action  a标签来进行页面的额跳转
	document.getElementById("pid").οnclick=function(){
		window.location.href="html01.html"//更改href属性值：有历史
	}
	document.getElementById("aid").οnclick=function(){
		window.location.replace("html01.html")//更改href，没有历史
	}
	
	document.getElementById("bid").οnclick=function(){
		window.location.reload()//刷新当前页
	}
</script>
</body>

4.2 history属性：历史

forward：前进

back ：后退

go()：go(1)前进一个 go(-1)后退

<body>
<a href="html02.html">html02</a>
<input type="button" value="前进"/>
<input type="button" value="后退"/>
<script>
  //history历史：对象：——前进：forward  后退：back 前进和后退：go（正数前进  负数后退  ）
  document.querySelector('input[value="前进"]').οnclick=function(){
  	console.log(window.location);
  	window.history.forward();//go（1）
  }
  document.querySelector('input[value="后退"]').οnclick=function(){
  	window.history.back();//go(-1)
  }
</script>
</body>

4.3 setTimeOut、clearTimeout

setTimeOut：定时作用：书写了一个函数，不想马上执行——2个小时之后执行

window.setTimeOut(函数名,延迟的时间)——单位是毫秒

clearTImeout：清除定时任务：接收参数就是任务对象

<body>
		<script>
		
			function changeColor(){
				var shi=new Date();
				var sec=shi.getSeconds();
				if(sec%2==0){
					document.body.bgColor="red";
				}else{
					document.body.bgColor="green";
				}
				window.setTimeout("changeColor()",1000);
			}
			window.setTimeout("changeColor()",1000);//延迟多久执行一次
		</script>

<input value="开始" id="begin" type="button"/><input value="停止" id="end" type="button"/>
		时间：<span id="dateinfo"></span>

<script>
	var timeout;
	function getDate(){
		var date=new Date();
		var year=date.getFullYear()
		var month=date.getMonth()
		var day=date.getDate()
		var hours=date.getHours()
		var min=date.getMinutes()
		var secods=date.getSeconds()
		var html=year+"年"+(month+1)+"月"+day+"日"+"<br/>"+hours+":"+min+":"+secods;
		document.getElementById("dateinfo").innerHTML=html;
		timeout=window.setTimeout("getDate()",1000)//imeout用来接收延迟事件对象
	}
	document.getElementById("begin").οnclick=function(){
		timeout=window.setTimeout("getDate()",1000)
	}
	document.getElementById("end").οnclick=function(){
		//清除延迟事件就可让他停止
		window.clearTimeout(timeout);
	}
</script>

4.4 setInterval、clearInterval

每隔多久执行一次

<body>
<input value="开始" id="begin" type="button"/><input value="停止" id="end" type="button"/>
时间：<p id="dateinfo"></p>

<script>
	var timeout;
	function getDate(){
		var date=new Date();
		var year=date.getFullYear()
		var month=date.getMonth()
		var day=date.getDate()
		var hours=date.getHours()
		var min=date.getMinutes()
		var secods=date.getSeconds()+""
		if(secods.length<2){
			secods="0"+secods;
		}
		var html=year+"年"+(month+1)+"月"+day+"日"+"<br/>"+hours+":"+min+":"+secods;
		document.getElementById("dateinfo").innerHTML=html; 
	}
	document.getElementById("begin").οnclick=function(){
		timeout=window.setInterval("getDate()",1000);//间隔多久执行一次
	}
	document.getElementById("end").οnclick=function(){
		//清除延迟事件就可让他停止
		window.clearInterval(timeout);
	}
	
</script>
</body>