JavaScript之BOM与DOM操作

1. 事件
事件 (Event) 是 JavaScript 应⽤跳动的⼼脏 ，进⾏交互，使⽹⻚动起来。事件可能是⽤户在某些内容上的点击、⿏标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发⽣的事情。

• 作用

   （1）验证⽤户输⼊的数据。
   （2）增加⻚⾯的动感效果。
   （3）增强⽤户的体验度。
  

• 事件中的几个名词

   事件源: 谁触发的事件
   事件名: 触发了什么事件
   事件监听: 谁管这个事情，谁监视？
   事件处理: 发⽣了怎么办
  

• 事件类型

   1.JavaScript可以处理的事件类型为：
   		⿏标事件、键盘事件、HTML事件。
   2.Window事件属性：针对 window 对象触发的事件（应⽤到 标签）。
     Form事件：由 HTML 表单内的动作触发的事件（应⽤到⼏乎所有 HTML 元素，但最常⽤在 form 元素中）。
     Keyboard事件 : 键盘事件。
     Mouse事件：由⿏标或类似⽤户动作触发的事件。
     Media事件：由媒介（⽐如视频、图像和⾳频）触发的事件（适⽤于所有 HTML 元素，但常⻅于媒介元素中，⽐如 、、、 以及     ）。
   3.常⽤的事件：
   	onload：当⻚⾯或图像加载完后⽴即触发。
   	onblur：元素失去焦点。
   	onfocus：元素获得焦点。
   	onclick：⿏标点击某个对象。
   	onchange：⽤户改变域的内容。
   	onmouseover：⿏标移动到某个元素上。
   	onmouseout：⿏标从某个元素上离开。
   	onkeyup：某个键盘的键被松开。
   	onkeydown：某个键盘的键被按下。
  

• 事件流和事件模型
  

   1.事件顺序有两种类型：事件捕获和事件冒泡。
   2.冒泡和捕获其实都是事件流（⻚⾯接受事件的顺序）的不同表现。
   3.IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。
   事件冒泡：
   	事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（⽂档）。
   	如果点击了⻚⾯中的<div>元素，click 事件⾸先在<div>元素上发⽣，⽽这个元素就是我们单击的元素。然后，click 事件沿DOM 树向上传播，在每⼀级节点上都会发⽣，直到传播到document对象。
   事件捕获：
   	不太具体的节点应该更早接收到事件，⽽最具体的节点应该最后接收到事件。⽤意在于在事件到达预定⽬标之前捕获它。
   	单击 <div> 元素，document 对象⾸先接收到 click 事件，然后沿DOM树依次向下，⼀直传播到事件的实际⽬标，即 <div> 元素。
   4.DOM事件流
   	“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于⽬标阶段和事件冒泡阶段。⾸先发⽣的是事件捕获阶段，为截获事件提供了机会。然后是实际的⽬标接收到事件。最后⼀个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
  

• 事件处理程序
  事件就是⽤户或浏览器⾃身执⾏的某种动作。例如 click、load 和 mouseover 都是事件的名字，⽽响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。

   1.HTML事件处理程序：直接绑定在html元素中。
   	特点：与元素标签耦合度过高，可能存在时差问题。
   	使用方式：
   		<button type="button" on事件名="处理程序">按钮</button>		
   2.DOM0级事件处理程序
   	特点：不能为同一个元素绑定同一个事件的多个处理程序，如果有，则进行覆盖。
   	使用方式：
   		1.通过id获取元素对象
   			var 变量名 = document.getElementById("元素的id属性值");
   		2.通过元素对象绑定事件
   			变量名.on事件名 = function(){
   				//处理程序
   			}
   3.DOM2 级事件处理程序
   	包括：
   		1.addEventListener 		添加事件的监听       
   		2.removeEventListener	移除事件监听
   	特点：可以为同一个元素绑定同一个事件的多个处理程序。
   	使用方式：
   		1.通过id获取元素对象
   			var 变量名 = document.getElementById("元素的id属性值");
   		2.添加事件的监听 
   			变量名.addEventListener('事件名',function(){
   				//处理程序
   			});
   			或
   			变量名.addEventListener('事件名',函数名);
   		3.移除事件监听：只能移除有函数名的处理程序。
   			变量名.removeEventListener('事件',函数名);
   	注意：
   		1.所有DOM节点都包含这两个⽅法，并且他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和⼀个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调⽤事件处理程序；如果是false则表示在冒泡阶段调⽤事件处理程序。
   		2.在移除的时候，不能移除匿名处理函数。
   		3.事件中不建议使用alert对话框，它会阻止代码的运行。
  

2. BOM对象

• Window对象方法

   1.系统对话框
   	（1）消息框: alert，常用。
   	    alert() 			方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
   	（2）输入框: prompt，返回提示框中的值。
   	    prompt() 			方法用于显示可提示用户进行输入的对话框。
   	    参数（可选）：
   	       第一个参数：要在对话框中显示的纯文本。
   	 	   第二个参数：默认的输入文本。
   	（3）确认框:confirm，返回 true/false.
   		confirm() 			方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
   2.打开窗⼝
   	window.open();        	打开一个空的窗口。
   	window.open(url地址);  	打开链接。
   3.关闭窗口
   	window.close();			关闭当前窗口。
   4.时间函数
   	setTimeOut()       		返回当前时间函数的唯一标识。
   		var 唯一标识 = setTimeout(function,times);	
   			在指定times毫秒数之后执行函数/程序。
   		清除时间函数：clearTimeOut(唯一标识);
   	setInterval()      		返回当前时间函数的唯一标识
   		var 唯一标识 = setInterval(function,times);
   			以指定times毫秒数为周期，循环执行函数/程序。
   		清除时间函数：clearInterval(唯一标识);
  

• history对象

   属性：length，返回浏览器历史列表中的URL数量。
   方法：
   	back()			加载 history列表中的前一个URL。
   	forward()		加载历史列表中的下一个URL。当页面第一次访问时，还没有下一个url。
   	go(number|URL)
   		URL		    参数使用的是要访问的URL。
   		number 		参数使用的是要访问的URL在History的URL列表中的相对位置。
   	go(-1)		    到上一个页面。
  

• location对象

   属性：href，设置或返回完整的URL。
   	window.location.href   获取当前页面地址
   方法：
   	​reload()		重新加载当前文档。
   	replace()   	用新的文档替换当前文档。
  

3. DOM对象
（Document Object Model ）文档对象模型。

• 节点
  

• 获取节点

   方法：
   	getElementById()		    根据id获取dom对象，如果id重复，那么以第一个为准
   	getElementsByTagName()		根据标签名获取dom对象数组
   	getElementsByClassName()	根据样式名获取dom对象数组
   	getElementsByName()		    根据name属性值获取dom对象数组，常用于多选获取值
   注意：
   	1.a标签正常会执行跳转的操作，设置href="javascript:void(0)" 表示伪协议，将不会跳转。
   	2.操作dom必须等节点初始化完毕后，才能执行。
   处理方式两种:
   	1.把script调用标签移到html末尾即可.
   	2.使用onload事件来处理JS，等待html加载完毕再加载 onload事件里的JS。
   		window.onload = function(){}
  

• 创建节点和插入节点

   1.创建节点
   	createElement()		创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象。
   	createTextNode()	创建一个文本节点，可以传入文本内容。
   	innerHTML  			也能达到创建节点的效果，直接添加到指定位置了。
   2.插入节点
   	write()				将任意的字符串插入到文档中。
   	appendChild()		向元素中添加新的子节点，作为最后一个子节点 。
   		如果追加的元素不存在，则添加新的；
   		如果追加的元素存在，则会将原有的元素添加到新的位置（剪切）。
   	insertBefore()		向指定的已有的节点之前插入新的节点。
   		newItem：要插入的节点。
   		exsitingItem：参考节点，需要参考父节点。
  

• 间接查找节点

   	childNodes         返回元素的一个子节点的数组。
   	firstChild         返回元素的第一个子节点。
   	lastChild          返回元素的最后一个子节点。
   	nextSibling        返回元素的下一个兄弟节点。
   	parentNode         返回元素的父节点。
   	previousSibling    返回元素的上一个兄弟节点。
  

• 删除节点

   	removeChild()   	从元素中移除子节点。
   	自我删除：目标节点.父节点.removeChild(目标节点);
  

4. 表单

• 获取表单

   前两种比较常用：
   	1.document.表单名称
   	2.document.getElementById(表单 id);
   	3.document.forms[表单名称] 
   	4.document.forms[索引]; //从 0 开始
  

• 获取表单元素

   元素分类
   	表单元素：
   		元素节点.value         	  取值/内容
   		元素节点.value = 值        设置值/内容
   	非表单元素：
   		元素节点.innerHTML = 值    设置值/内容
   		元素节点.innerHTML         取值/内容
   1.获取input元素
   	1.通过id获取
   		document.getElementById(元素 id);
   	2.通过form.名称形式获取:
   		myform.元素名称;    name属性值
   	3.通过name获取 
   		document.getElementsByName(name属性值)[索引] // 从0开始
   	4.通过tagName数组 
   		document.getElementsByTagName('input')[索引] // 从0开始
   2.获取单选按钮
   	前提：将⼀组单选按钮设置相同的name属性值。
   	1.document.getElementsByName("name属性值");
   	2.遍历每个单选按钮，并查看单选按钮元素的checked属性：
   		若属性值为true表示被选中，否则未被选中	
   		​	选中状态设定： 	checked='checked' 或  checked='true'  或  checked	
   		​	未选中状态设定：	没有checked属性   或  checked='false'
   3.获取多选按钮
   	操作⽅式与单选同理，不同之处在于可以多选。
   4.获取下拉选项
   	1.获取select对象
   		var ufrom = document.getElementById("ufrom");
   	2.获取选中项的索引
   		var idx = ufrom.selectedIndex;
   	3.获取选中项options的value属性值
   		var val = ufrom.options[idx].value;
   	注意：当通过options获取选中项的value属性值时：
   		若没有value属性，则取option标签的内容。
   	    若存在value属性，则取value属性的值。
   	4.获取选中项options的text
   		var txt = ufrom.options[idx].text;
   	​	选中状态设定：selected='selected'、selected=true、selected
   	​	未选中状态设定：不设selected属性  。
  

• 提交表单

   1.使用普通button按钮+onclick事件+事件中编写代码:
   		获取表单.submit();
   2.使用submit按钮 + onclick="return 函数()" +函数编写代码: 
   	​	最后必须返回：return true|false;
   3.使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 
   		最后必须返回：return true|false;