1. Chap 1. A new design for the Web Byungwook Cho K. 2006-07-28
2.
3.
4.
5.
6.
7.
8.
9.
10. 4. DOM el.innerHTML += “<div>HTML 태그 붙이기 </div>”; innerHTML element.className = ‘ 클래스 ID’ ( 클래스 ID) el.style.border=“solid green 2px”; el.style.width=“200px”; 스타일 적용 <div class=‘classId’> 내용 </div> var e1 = document.getElementById(‘ 클래스 ID’); var child = p.childNodes(); for(int i=0;i<child.length;i++){ … } 엘리먼트 가지고 오기 var child = document.createElement(‘div’); 엘리먼트 생성 var txt = document.createTextNode(‘ 글자’ ); 텍스트 노드 생성 e1.appendChild(child); 생성된 엘리먼트 텍스트 노드 붙이기 자바스크립트 DOM 액션
11.
12. 5. 비동기 데이터 로딩 - XmlDocument & HttpRequest function getXMLDocument(){ var xDoc = null; if(document.implementation && document.implementation.createDocument){ xDoc = document.implementation.createDocument( “”,””,null); Mozila }else if(typeof ActiveXObject != “undefined”){ var msXmlAx=null; try{ msXmlAx = new ActiveXObject(“Msxml12.DOMDocument”); }catch(e){ msXmlAx = new ActiveXObject(“Msxml.DOMDocument”); } xDoc = msXmlAx; } if(xDoc == null || type of xDoc.load==“undefined”){ xDoc == null; } return xDoc; } getXMLDocument function getXMLRequest(){ var xRequest = null; if(window.XMLHttpRequest){ xRequest = new XMLHttpRequest(); Mozila } else if (typeof ActiveXObject != “undefined”){ xRequest = new ActiveXObject(“Microsoft.XMLHTTP”); IE } return xRequest; } getXMLHTTPRequest
13. 5. 비동기 데이터 로딩 - XmlDocument & HttpRequest <html> <head> <script type='text/javascript'> var req=null; var console=null; var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; function loadXMLDoc(url) { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); } } function processReqChange(){ var ready=req.readyState; var data=null; if (ready==READY_STATE_COMPLETE){ data=req.responseText; }else{ data="loading...["+ready+"]"; } toConsole(data); } function toConsole(data){ if (console!=null){ var newline=document.createElement("div"); console.appendChild(newline); var txt=document.createTextNode(data); newline.appendChild(txt); } } window.onload=function(){ console=document.getElementById('console'); loadXMLDoc("data.txt"); } </script> </head> <body> <div id='console'></div> </body> </html>