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



좋은 웹페이지 즐겨찾기