js的事件处理机制及dom模型

一、js的事件处理机制及dom模型

	1、js的数据验证

	2、dom模型：

		(1)什么是dom?

		 document object model,将一个结构化的文档（比如

		 xml,html）转化为一棵符合dom要求的树。通过对树的

		 操作（crud），来间接实现对结构化文档的操作。

		(2)浏览器如何显示html文档

			浏览器读取html文档，将其转化为w3c dom树（即

			一棵对象树）放在内存里。如果dom树的节点发生任

			何改变，浏览器就会立即显示这种改变。对w3c dom

			树，我们可以使用js来操控。

		(3) w3c dom的结构

			A.继承关系图

				除了Node,Document,Element,HTMLElement

				这四个节点以外，其它节点都与html文档中的

				元素一一对应。

				Node 

					Document

						HTMLDocument（代表整个html文档）

							HTMLBodyElement（body）

					Element

						HTMLElement

							HTMLFormElement（form）

								HTMLInputElement（input控件，包括 text password button checkbox radio ...）

								HTMLSelectElement （下拉列表、多选框）

									HTMLOptionElement （option）

							HTMLDivElement （div）

							HTMLTableElement（表格）

								HTMLTableCaptionElement （caption）

								HTMLTableRowElement（行）

								HTMLTableCellElement（单元格）

								HTMLULElement

								HTMLOLElement

								HTMLLIElement

			B.如何访问某个节点

				方式一：document.getElementById(id);

				依据标记的id查找。

				方式二：parentNode previousSibling nextSibling 

				childNodes firstChild lastChild

				因为不同浏览器对dom模型中的空节点支持不一，

				所以，以上方法用得不多，尽量使用方式一。

				getElementsByTagName(tagName):

				依据标签名查找，返回的是一个HTMLCollection。

				对于某些节点，可以采用特殊的方式来访问

				Form:

					elements属性值是一个HTMLCollection

					HTMLCollection可以采用如下两种方式访问

						form1.elements[0] : 第一个控件

						form1.elements['id'/name]:  得到的是

						该表单中id或者name对应的控件

					elements属性也可以省略不写

				document:

					forms属性值是一个HTMLCollection

					返回当前html文档里的所有表单对象。

				C.修改节点

					1）value属性

					2）innerHTML属性

					3）style属性

						对于某个节点，可以通过修改其style属性，

						来改变其样式。

						style属性只能获得内联样式。

					4）className

					5）src属性

					6）options属性（Select）

				D、添加节点

						创建节点

						document.createElement(Tag)

						tag:是一个合法的标签名,

						比如 document.createElement('div');

						document.createTextNode(text)

						创建一个字符节点

						<div>hello</div>

						添加节点	

							appendChild(node):添加到父节点的

							所有子节点的末尾。

							insertBefore(newNode,refNode):

							将newNode添加到refNode前

							replaceChild(newNode,oldNode):

					E、删除节点

							parentNode.removeChild(node)

							

		3、使用js改变html两个元素的默认行为

				对于<form>,默认是当点击 submit按钮，

				浏览器会提交该表单的数据。

				对于<a href="">test</a>,默认是，当点击链接

				之间的内容时，浏览器会跳转到href所指向的地址。

				改变方式：

				对于表单：如果onsubmit返回值是false，则表单

				不会提交。

				<form onsubmit="return false;">

				....

				 对于链接

				 <a href="" onclick="return false;">test</a>

		4、Select的常用属性和方法

			length

		l		length 属性可返回下拉列表中选项的数目。

			selectedIndex

				selectedIndex 属性可设置或返回下拉列表中被选选项的索引号

			options

				返回包含 <select> 元素中所有 <option> 的一个数组。

				如果把 options.length 属性设置为 0,Select 对象中

				所有选项都会被清除； 

				如果 options.length 属性的值比当前值小，出现

				在数组尾部的元素就会被丢弃。；

				如果把 options[] 数组中的一个元素设置为 null，

				那么选项就会从 Select 对象中删除.

			onchange

				当改变选择时调用。

			Option 对象的 selected 属性

				true:表示该选项被用户选择了。

				false:没有被选择

				默认值是false，除非用户选择了该选项。

				浏览器只会提交seleccted=true对应的选项。

			Option对象表示Select中的某个选项，

			text:

			value:

			可以使用如下语句创建一个Option

			var op1 = new Option(text,value);

			select.options[1] = op1;

	5、表格的常用属性与方法

			属性

				rows 属性

				rows 集合返回表格中所有行的一个数组，该集合

				包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。

				tBodies属性

				tBodies[] 返回包含表格中所有 tbody 的一个数组。

				tFoot属性

				返回表格的 TFoot 对象。

				tHead属性

				返回表格的 THead 对象。

		方法

	 			insertRow（index）

				insertRow(index) 方法用于在表格中的

				指定位置插入一个新行。

				返回一个 HTMLRowElement，表示新插入的行。

				相当于创建了一个新的 <tr> 标记，并把它插入

				表中的指定位置。

				新行将被插入 index 所在行之前。若 index 

				等于表中的行数，则新行将被附加到表的末尾。

			deleteRow(index)方法

				deleteRow(index) 方法用于从表格删除指定位置的行。

	HTMLRowElement对象

		属性

		cells

		cells[] 返回包含行中所有单元格的一个数组

		方法

			deleteCell方法

		deleteCell(index) 方法用于删除表格行中的单元格

		insertCell(index)方法

		insertCell(index) 方法用于在 HTML 表的一行的

		指定位置插入一个空的 <td> 元素。

		返回值一个 HTMLCellElement对象，表示新创建

		并被插入的 <td> 元素。该方法将创建一个新的

		 <td> 元素，把它插入行中指定的位置。新单元格

		将被插入当前位于 index 指定位置的表元之前。

		如果 index 等于行中的单元格数，则新单元格被

		附加在行的末尾。后续可以调用TableCell的

		innerHTML属性指定单元格中的内容.

	6、传统的html dom模型：

		1）window

		open方法

		第二个参数表示窗口名，如果该窗口名对应的窗口

		已经打开，则不再打开新的窗口。

		打开一个新的窗口，例如：

		window.open

		('1.html', 'new', 'height=100, width=200, top=0, 

		left=0,	toolbar=no, menubar=no,scrollbars=no, 

		resizable=no, location=no, status=no')；

		'1.html' 弹出窗口的文件名；

		'new' 弹出窗口的名字；如果该参数指定了一个已经存在的窗口，则 open() 方法不再创建一个新窗口，而只是返回对指定窗口的句柄。

		height=100 窗口高度；

		width=200 窗口宽度；

		top=0 窗口距离屏幕上方的象素值；

		left=0 窗口距离屏幕左侧的象素值；

		toolbar=no 是否显示工具栏，yes为显示；

		menubar 是否显示菜单栏。

		scrollbars 是否显示滚动栏。

		resizable=no 是否允许改变窗口大小，yes为是 。

		location=no 是否显示地址栏，yes为是。

		status=no 是否显示状态栏内的信息。

	close方法

		关闭窗口

		返回值为窗口对象句柄

	status 属性

		设置或返回窗口状态栏中的文本。

	document属性

		获得Document对象

	location属性

		获得Location对象

	alert方法

		弹出一个警告对话框

	confirm方法

		弹出一个选择对话框，返回用户是否确认。

	prompt方法

		弹出一个供用户输入信息的对话框，返回用户

		输入信息。

	setTimeout方法

		setTimeout() 方法用于在指定的毫秒数后

		调用函数或计算表达式。

	clearTimeout方法

		clearTimeout() 方法可取消由 setTimeout() 方法

		设置的 timeout。

	setInterval方法

		按照指定的周期（以毫秒计）来调用函数或

		计算表达式。

	setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 

	返回的 ID 值可用作 clearInterval() 方法的参数。

	clearInterval方法

		clearInterval() 方法可取消由 setInterval() 

		设置的 timeout。

		clearInterval() 方法的参数必须是由 setInterval() 返回的 ID

	opener:

		打开该窗口的窗口对象，如果窗口由

		用户打开，则返回null

	parent:

		当前窗口的父窗口



   7、事件处理机制

   		(1)事件对象

   		如何获得一个事件对象

   		ie:

   			直接使用event对象

   		ff:

   			函数中添加一个参数(event)

   		(2)如何通过事件对象获得事件源

   		ie:

   			srcElement属性

   		ff:

   			target属性

   		(3)事件冒泡机制

   			子节点产生的事件会向上抛给父节点

   			禁止事件冒泡

   				e.cancelBubble=true;	

   		(4)事件处理代码绑订的方式

   			A.绑订到html元素之上。

   			B.绑订到dom对象之上。

   			A与B的区别

   				B这种方式不能传参	

 8、js框架

 		prototype

 		$('id') 相当于  document.getElementById('id');

 		$F('id'); 相当于  

 		document.getElementById('id').value;

 		$('id1','id2','id3')  返回一个数组

 9、两个内置对象

 		Date

 		Math