JS-BOM对象、DOM对象和事件

JS-BOM对象

* BOM：Browser Object Model 浏览器对象模型
		* 概念：
			* 将浏览器的各个组成部分封装为对象
		* 特点：
			* BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
		* 组成：
			* Window(*****)：窗口对象
			* Location(**)：地址栏对象
			* History(*)：历史记录(当前窗口)对象
			* Navigator ：浏览器对象   基本不用仅作了解
			* Screen：显示器屏幕        基本不用仅作了解	
				availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
				availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
				height		获取屏幕的垂直分辨率。 
				width		获取屏幕的水平分辨率。 
	
	
		* Window：窗口对象
			* 使用方式： 
				* window.方法名();    window 可以省略
				* 方法名;
			
			* 方法:
				* 与弹出有关的方法
					alert() 显示带有一段消息和一个确认按钮的警告框。
					例子：window.alert("我是警告弹框"); 

					(**)confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 

					例子：var flag=window.confirm("你确定吗？");
						

					prompt() 显示可提示用户输入的对话框。 
					
					例子：var  text=window.prompt("请输入地址"，"");//参数2：默认文字
					
				
				* 与定时器有关的方法
					(**)setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行
					clearInterval() 取消由 setInterval() 设置的 timeout。  
					
					(**)setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
						* 参数：
							参数1：字符串(js语句)或者 函数对象
							参数2：毫秒值。


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


					例子：
						设置定时器 3秒后要执行的函数
						 var id=window.setTimeout("window.close()",3000);
						var id1=window.setTimeout("shut()",3000);
						var id2=window.setTimeout(shut，3000);
						
						funtion shut(){
							window.close();
						}
						取消定时器 通过定时器的id 来取消
						window.clearTimeout(id);
						window.clearTimeout(id2);
				
				* 与打开关闭有关的方法：
					open():打开新窗口
						* 参数：打开目标的URL
						* 返回值：返回新打开窗口的window引用
					例子：var newWindwo=window.open("http://www.baidu.com");
						newWindwo.close();
						
					close():关闭窗口
						* 谁调用我 ， 我关谁
						例子：window.close();
			* 属性：
				* 获取其他对象的属性：
					* history ：对 History 对象的只读引用。请参数 History 对象。 
					* location ：用于窗口或框架的 Location 对象。请参阅 Location 对象。 
					* Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。 
					* Screen 对 Screen 对象的只读引用。请参数 Screen 对象。 
					
					* document：对 Document 对象的只读引用。请参阅 Document 对象。 
				
		* Location：地址栏对象
			获取方式：可以用window对象中的属性获取
			var lc=window.location;
			lc.href="http://www.baidu.com";

			* 属性：
				href：设置或获取当前的URL
		* History：历史记录对象
			获取方式：可以用window对象中的属性获取
			var ht=window.history;
			ht.go(1);
			* 方法：
				go:
					1:前进
					-1：后退

JS-DOM对象

* DOM：Document Object Model 文档对象模型
		* 概念：将标记语言文档的各个组成部分 封装为对象
		
		* 组成：
			* Document：文档对象
			* Element:元素对象
			* Attribute：属性对象
			* Text：文本对象
			* Comment：注释对象
			
			* Node：节点对象
			
		* Document：文档对象
			* 获取：window.document

			//document 中 body属性 可以获取body标签对象
			document.body.bgColor = "red";
			//title 属性获取文档标题
			var bt = document.title;
			//获取文档最后一次修改时间
			var rq=document.lastModified;
			//URL 属性 获取地址栏中的地址

			* 方法：
				* 获取Element对象
					* getElementById():通过id属性值获取唯一的元素
					* getElementsByTagName():通过标签名称获取元素对象数组
					* getElementsByName():通过name属性值获取元素对象数组
					* getElementsByClassName():通过class属性值获取元素对象数组
				
				* 创建其他对象
				* createElement:创建元素对象
				* createAttribute：创建属性对象
				* createComment：创建注释对象
				* createTextNode：创建文本对象
				//给属性对象设置值
				font1.setAttribute('color','yellow');
			例子：	
			var div4 = window.document.createElement("div");
			var text1 = window.document.createTextNode("我是第四个div");
			var v = div4.appendChild(text1);
			document.getElementsByTagName("body")[0].appendChild(div4);
		* Element:元素对象
			* innerHTML属性：获取或设置 元素的 子内容
			* innerTEXT属性:获取标签之间的文本内容 		

事件

* 事件
	* 概念：
		* 事件：一件事
		* 事件源：事件发生的组件。
		* 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
		* 注册监听：将监听器绑定到事件源上，监听事件的发生
			
	* js中注册监听的方式：
		1. 在定义标签时，添加 事件名称属性。属性值是js代码
			* js代码会被自动封装到一个function函数的方法体中
			例子：<div id="div_id" onclick="fun();">hehe</div>
		2. 通过js获取元素对象，再添加事件。
		
		例子：
		//1.获取元素对象
		var input = document.getElementById("username");
		//2.注册监听
		input.onclick = function(){
			//alert("hehe");
		}
	* js中事件的种类：
		* 焦点事件：
			* onfocus 元素获得焦点。 
			* onblur  元素失去焦点
			
		* 点击事件：
			* onclick 当用户点击某个对象时调用的事件句柄。 
			* ondblclick 当用户双击某个对象时调用的事件句柄。 
					
		* 键盘事件：
			* onkeydown 某个键盘按键被按下。
			* onkeyup 某个键盘按键被松开。 
			* onkeypress 某个键盘按键被按下并松开。 
		* 鼠标事件：
			* onmousedown 鼠标按钮被按下。 
			* onmouseup 鼠标按键被松开。 
			* onmouseover 鼠标移到某元素之上。 
			* onmouseout 鼠标从某元素移开。 
			* onmousemove 鼠标被移动。 
				
		* 表单事件：
			* onsubmit 确认按钮被点击。 
			* onreset 重置按钮被点击。 
					
		* 加载与卸载事件
			* onload 一张页面或一幅图像完成加载。 
			* onunload 用户退出页面。 其他浏览器不支持 IE支持
				
		* 其他事件：
			针对表单
			* onchange 域的内容被改变。 比如下拉框
			* onselect 文本被选中。