BOM浏览器对象模型，DOM文档对象模型

BOM浏览器对象模型，DOM文档对象模型

BOM：Browser Object Model 浏览器对象模型

概念：将浏览器的各个组成部分封装为对象
		特点：BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
		组成：
            Window(*****)：窗口对象
            Location(**)：地址栏对象
            History(*)：历史记录(当前窗口)对象
            Navigator ：浏览器对象   
            Screen：显示器屏幕        	
            availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
            availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
            height		获取屏幕的垂直分辨率。 
            width		获取屏幕的水平分辨率。 
Window：窗口对象
		使用方式： 
			1.window.方法名();    window 可以省略
			2.方法名;
		
	方法:
		与弹出有关的方法
				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 对象的只读引用。
				location ：用于窗口或框架的 Location 对象。
				Navigator 对 Navigator 对象的只读引用。 
				Screen 对 Screen 对象的只读引用。
				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：后退

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');
				bd.remove(); 删除自己
                bd.removeChild(div); //移除子元素
				//根据属性名来移除标签上的属性
				//div.removeAttribute("align");
				//移除属性对象。你传入的是一个属性对象
				//div.removeAttributeNode(attr);

	例子：	
			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 某个键盘按键被按下并松开。 
					通过事件对象event中的keyCode属性，可以获取键盘某个键的键码  其实就是ASCII码表中对按键的编码 e.keyCode	                                                                 
				 鼠标事件：
					 onmousedown 鼠标按钮被按下。 
					 onmouseup 鼠标按键被松开。 
					 onmouseover 鼠标移到某元素之上。 
					 onmouseout 鼠标从某元素移开。 
					 onmousemove 鼠标被移动。 
				鼠标按下时，通过事件对象 event中的属性  button 或 which 可以获取鼠标按键的编号。
					 e.button 事件对象中的 button属性可以获取鼠标按键的编号
			         e.which 也可以获取鼠标的按键编号 0 左键  1滚轮   2右键
				
				 表单事件：
					 onsubmit 确认按钮被点击。 
					 onreset 重置按钮被点击。 
					 oninput 事件 当你往表单中输入内容时就触发 
					
				加载与卸载事件
					 onload 一张页面或一幅图像完成加载。 
					 onunload 用户退出页面。 其他浏览器不支持 IE支持
				
				其他事件：
					针对表单
					 onchange 域的内容被改变。 比如下拉框
					 onselect 文本被选中。

 
	JS事件对象 event中的属性和功能
				属性：currentTarget:   获取的是绑定了该事件的元素对象
				     target :  获取的是触发了该事件的元素对象 
				     type: 获取事件类型
				     keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）
				     which/button  当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
				方法：                                                                        					e.stopPropagation() 阻止事件冒泡
					e.preventDefault(); 阻止元素的默认行为