명품웹프로그래밍 1
2 강의목표 1. HTML DOM 의필요성을이해한다. 2. DOM 트리와 HTML 페이지의관계를이해한다. 3. DOM 객체의구조와 HTML 태그와의관계를이해한다. 4. DOM 객체를통해 HTML 태그의출력모양과콘텐츠를제어할수있다. 5. document 객체를이해하고, write() 메소드를활용할수있다. 6. createelement() 등을통해동적으로 DOM 객체를웹페이지에추가, 삭제할수있다.
HTML 페이지와자바스크립트객체 3 자바스크립트코드는브라우저로부터 3 가지유형의객체를제공받아활용할수있다. index.html BOM 객체 window 자바스크립트프로그램 <html> <head> <script> var sum = 0; for(n=0; n<10; n++) sum += n; alert( 합은 = + sum); </script> <body> </html> 활용 활용 HTML DOM 객체 history document body Array Date 코어객체 브라우저
HTML DOM(Document Object Model) 4 HTML DOM( 간단히 DOM) 웹페이지에작성된 HTML 태그당객체 (DOM 객체 ) 생성 목적 HTML 태그가출력된모양이나콘텐츠를제어하기위해 DOM 객체를통해각태그의 CSS3 스타일시트접근및변경 DOM 트리 HTML 태그에의해출력된텍스트나이미지변경 HTML 태그의포함관계에따라 DOM 객체의트리 (tree) 생성 DOM 트리는부모자식관계 DOM 객체 DOM 트리의한노드 HTML 태그당하나의 DOM 객체생성 DOM 노드 (Node), DOM 엘리먼트 (Element) 라고도불림
window BOM(Browser Object Model) navigator history location screen <!DOCTYPE html> <html> <head> <title>html DOM 트리 </title> </head> <body> <p style="color:blue"> 이것은 <span style="color:red"> 문장입니다. </span> </p> <form> <input type="text"> <input type="button" value=" 테스트 "> <hr> </form> </body> </html> document html head DOM(Document Object Model) body DOM 객체 title p form span input input hr 5
DOM 트리의특징 6 DOM 트리의특징 DOM 트리의루트는 document 객체 DOM 객체의종류는 HTML 태그종류만큼 HTML 태그당 DOM 객체가하나씩생성 HTML 태그의포함관계에따라 DOM 트리에부모자식관계 브라우저가 HTML 태그를화면에그리는과정 1. 브라우저가 DOM 트리의틀 (document 객체 ) 생성 2. 브라우저가 HTML 태그를읽고 DOM 트리에 DOM 객체생성 3. 브라우저는 DOM 객체를화면에출력 4. HTML 문서로딩이완료되면 DOM 트리완성 5. DOM 객체변경시, 브라우저는해당 HTML 태그의출력모양을바로갱신
DOM 객체와 HTML 페이지의화면출력 7 DOM 객체를제어하면 HTML 태그제어효과발생 document html head body title p form span input input hr
HTML 태그의요소 8 HTML 태그 엘리먼트 (element) 로도불림 다음 5 가지요소로구성 엘리먼트이름 속성 CSS3 스타일 이벤트리스너 콘텐츠 (innerhtml)
DOM 객체의구성요소 9 DOM 객체는 5 개의요소구성 프로퍼티 (property) HTML 태그의속성 (attribute) 반영 메소드 (method) DOM 객체의멤버함수로서, HTML 태그제어가능 컬렉션 (collection) 자식 DOM 객체들의주소를가지는등배열과비슷한집합적정보 이벤트리스너 (event listener) HTML 태그에작성된이벤트리스너반영 약 70여개의이벤트리스너를가질수있음 CSS3 스타일 HTML 태그에설정된 CSS3 스타일시트정보를반영 DOM 객체의 style 프로퍼티를통해 HTML 태그의모양제어가능
DOM 객체의구성 DOM 객체 p 프로퍼티 (property) 메소드 (method) 컬렉션 (collection) 이벤트리스너 (event listener) CSS3 스타일 id tagname innerhtml style "firstp" P" 이것은 <span style="color:red"> 문장입니다.</span>.. 프로퍼티 click() focus() setattribute().. 메소드 <p id="firstp" style="color:blue" onclick="this.style.color='teal'"> 이것은 <span style="color:red"> 문장입니다. </span> </p> children onclick onkeydown onload.. this.style.color='teal'.. 컬렉션 이벤트리스너 <p> </p> 태그 color "blue" 10 bordercolor margintop.. CSS3 스타일시트객체
DOM 객체의프로퍼티와 DOM 객체사이의관계 11 document html html 의 children head p 의 parentelement body body 의 childelementcount=2 title p form p 의 previous Element Sibling p 의 nextelementsibling 서로 sibling 관계 span input input hr form 의 firstelementchild form 의 lastelementchild
예제 8-1 DOM 객체의구조출력 : p 객체사례 12 <!DOCTYPE html> <html> <head><title>html DOM 트리 </title></head> <body> <h3>dom 객체 p 의프로퍼티, 스타일, 이벤트리스너 </h3> <hr> <p id="firstp" style="color:blue; background:yellow" onclick="this.style.color='teal'"> 이것은 <span style="color:red"> 문장입니다. </span> </p> <script> var p = document.getelementbyid("firstp"); var text = "p.id = " + p.id + "\n"; text += "p.tagname = " + p.tagname + "\n"; text += "p.innerhtml = " + p.innerhtml + "\n"; text += "p.style.color = " + p.style.color + "\n"; text += "p.onclick = " + p.onclick + "\n"; id 가 firstp 인태그의 DOM 찾기 text += "p.childelementcount = " + p.childelementcount + "\n"; text += " 너비 = " + p.offsetwidth + "\n"; text += " 높이 = " + p.offsetheight + "\n"; alert(text); </script> </body> </html>
DOM 객체다루기 13 DOM 객체구분, id 태그속성 <p id="firstp"> 안녕하세요 </p> DOM 객체찾기, document.getelementbyid() var p = document.getelementbyid("firstp"); // id 값이 firstp인 DOM 객체리턴 p.style.color = "red"; // p 객체의글자색을 red로변경 DOM 객체의 CSS3 스타일동적변경 CSS3 스타일프로퍼티는다음과같이사용 background-color 스타일프로퍼티 -> backgroundcolor font-size 스타일프로퍼티 -> fontsize <span id="myspan" style="color:red"> 문장입니다.</span> var span = document.getelementbyid("myspan"); // id 가 myspan 인객체찾기 span.style.color = "green"; span.style.fontsize = "30px"; // 문장입니다 의글자색을 green 으로변경 // 문장입니다 의폰트를 30px 크기로변경 span.style.border = "3px dotted magenta"; // 3 픽셀의 magenta 점선테두리
예제 8 2 <span> 의 CSS3 스타일동적변경 14 <!DOCTYPE html> <html><head><title>css 스타일동적변경 </title> <script> function change() { var span = document.getelementbyid("myspan"); span.style.color = "green"; // 글자색 green span.style.fontsize = "30px"; // 글자크기는 30 픽셀 span.style.display = "block"; // 블록박스로변경 span.style.width = "6em"; // 박스의폭. 6 글자크기 버튼을클릭하면 change() 함수호출. 스타일변경 span.style.border = "3px dotted magenta"; // 3 픽셀점선 magenta 테두리 span.style.margin = "20px"; // 상하좌우여백 20px } </script> </head> <body> <h3>css 스타일동적변경 </h3> <hr> <p style="color:blue" > 이것은 <span id="myspan" style="color:red"> 문장입니다.</span> </p> <input type="button" value=" 스타일변경 " onclick="change()"> </body> </html> 인라인박스가블록박스로변경
innerhtml 프로퍼티 15 innerhtml 프로퍼티 시작태그와종료태그사이에들어있는 HTML 컨텐츠 <p id="firstp" style="color:blue"> 이것은여기에 <span style="color:red"> 문장입니다클릭하세요.</span> </p> innerhtml innerhtml 프로퍼티수정 -> HTML 태그의콘텐트변경 var p = document.getelementbyid("firstp"); p.innerhtml= 나의 <img src= puppy.jpg > 강아지입니다. ; <p id="firstp" style="color:blue"> 나의이것은 <img <span src= puppy.jpg > style="color:red"> 강아지입니다문장입니다.</span>. </p>
16 예제 8-3 innerhtml 을이용하여 HTML 콘텐츠동적변경 <!DOCTYPE html> <html> <head> <title>innerhtml 활용 </title> <script> function change() { var p = document.getelementbyid("firstp"); p.innerhtml= " 나의 <img src='puppy.png'> 강아지 "; } </script> </head> <body> <h3>innerhtml 활용 : 아래글자에클릭하면예쁜강아지가보입니다.</h3> <hr> <p id="firstp" style="color:blue" onclick="change()"> 여기에 <span style="color:red"> 클릭하세요 </span> </p> </body> </html> 마우스클릭하면아래와같이변경됩니다.
this 17 this 키워드 객체자신을가리키는자바스크립트키워드 DOM 객체에서객체자신을가리키는용도로사용 예 ) <div> 태그자신의배경을 orange 색으로변경 <div onclick="this.style.backgroundcolor='orange'"> 예 ) 버튼이클릭되면자신의배경색을 orange 로변경 <button onclick="this.style.backgroundcolor='orange'">
예제 8-4 this 활용 18 <!DOCTYPE html> <html> <head> <title>this 활용 </title> <script> function change(obj, size, color) { obj.style.color = color; obj.style.fontsize = size; } </script> </head> <body> <h3>this 활용 </h3> <hr> this 는이 <button> 객체의주소 <button onclick="change(this, '30px', 'red')"> 버튼 </button> <button onclick="change(this, '30px', 'blue')"> 버튼 </button> <div onclick="change(this, '25px', 'orange')"> 여기클릭하면크기와색변경 </div> </body> </html> 버튼클릭시 텍스트클릭시
document 객체 19 document HTML 문서전체를대변하는객체 프로퍼티 - HTML 문서의전반적인속성내포 메소드 - DOM 객체검색, DOM 객체생성, HTML 문서전반적제어 DOM 객체를접근하는경로의시작점 DOM 트리의최상위객체 브라우저는 HTML 문서로드전, document 객체를먼저생성 document 객체를뿌리로하여 DOM 트리생성 document 객체접근 window.document 또는 document 이름으로접근 document 객체는 DOM 객체가아님 연결된스타일시트가없음 document.style.color = "red"; // 오류. document 에는 CSS3 스타일시트가연결되지않음
예제 8-5 document 객체의프로퍼티출력 20 <!DOCTYPE html> <html> <head id="myhead"> <title>document 객체의주요프로퍼티 </title> <script> var text = " 문서로딩중일때 readystate = " + document.readystate + "\n"; </script> </head> <body style="background-color:yellow; color:blue; direction:rtl" onload="printproperties()"> <h3>document 의주요프로퍼티 </h3> <hr> <a href="http://www.naver.com"> 네이버홈페이지 </a> <div> 이곳은 div 영역입니다.</div> <input id="input" type="text" value=" 여기포커스가있습니다 "> <script> // 문서가완전히로드 ( 출력 ) 되었을때, 현재 document 의프로퍼티출력 function printproperties() { document.getelementbyid("input").focus(); // <input> 태그에포커스를줌 text += "1. location =" + document.location + "\n"; text += "2. URL =" + document.url + "\n"; text += "3. title =" + document.title + "\n"; text += "4. head의 id =" + document.head.id + "\n"; text += "5. body color =" + document.body.style.color + "\n"; text += "6. domain =" + document.domain + "\n";; text += "7. lastmodified =" + document.lastmodified + "\n"; text += "8. defaultview = " + document.defaultview + "\n"; text += "9. 문서의로드완료후 readystate = " + document.readystate + "\n"; text += "10. referrer = " + document.referrer + "\n"; text += "11. activeelement = " + document.activeelement.value + "\n"; text += "12. documentelement의태그이름 = " + document.documentelement.tagname + "\n"; alert(text); } </script> </body> </html>
예제 8-5 document 객체의프로퍼티출력 21 로드후경고창출력 커서가깜박이고있음. 포커스가있다는뜻 경고창에 document 객체의주요프로퍼티출력
DOM 트리에서 DOM 객체찾기 22 태그이름으로찾기 document.getelementsbytagname() 태그이름이같은모든 DOM 객체들을찾아컬렉션리턴 예 ) <div> 태그의모든 DOM 객체찾기 var divtags = document.getelementsbytagname("div"); var n = divtags.length; // 웹페이지에있는 <div> 태그의개수 class 속성으로찾기 document.getelementsbyclassname() class 속성이같은모든 DOM 객체들을찾아컬렉션리턴 예 ) <div class="plain">...</div> <div class="important">...</div> <div class="plain">...</div> var plainclasses = document.getelementsbyclassname("plain"); var n = plainclasses.length; // 웹페이지에 class= plain 속성을가진태그의개수
23 예제 8-6 태그이름으로 DOM 객체찾기, getelementsbytagname() <!DOCTYPE html> <html> <head> <title>document.getelementsbytagname()</title> <script> function change() { var spanarray = document.getelementsbytagname("span"); for(var i=0; i<spanarray.length; i++) { var span = spanarray[i]; span.style.color = "orchid"; span.style.fontsize = "20px"; } } </script> </head> <body> <h3> 내가좋아하는과일 <button onclick="change()"> 누르세요 </button> </h3> <hr> 저는빨간 <span> 사과 </span> 를좋아해서아침마다한개씩먹고있어요. 운동할때는중간중간에 <span> 바나나 </span> 를먹지요. 탄수화물섭취가빨라힘이납니다. 또한달콤한향기를품은 <span> 체리 </span> 와여름냄새물씬나는 <span> 자두 </span> 를좋아합니다. </body> </html> 클릭
document.write() 와 document.writeln() 24 HTML 페이지로딩과정 1. 브라우저는 HTML 페이지로드전빈상태 document 생성 2. 브라우저는 HTML 페이지를위에서아래로해석 3. HTML 태그들을 document 객체에담아간다 (DOM 객체생성 ). 4. </html> 태그를만나면 document 객체를완성하고닫는다. write() document 객체에담긴 HTML 콘텐츠마지막에 HTML 태그들을추가 추가되는 HTML 태그들은 DOM 객체로바뀌고 DOM 트리에추가 삽입된 HTML 태그들이브라우저화면에출력 예 ) writeln() document.write("<h3>welcome to my home</h3>"); document.write(2+3); // 합한결과 5 출력 document.write("<p> 오늘은 " + "sunny day 입니다 </p>"); HTML 텍스트에 '\n' 을덧붙여출력. 한칸띄는효과한줄을띄려면 document.write("<br>");
예제 8-7 write() 와 writeln() 메소드활용 25 <!DOCTYPE html> <html> <head> <title>write() 와 writeln() 활용 </title> </head> <body> <h3>write() 와 writeln() 활용 </h3> <hr> <script> document.write("<h3> 동물원에소풍갑시다 </h3>"); document.write("<p style='color:blue'> 날씨가좋아 "); document.write(" 소풍갑니다 </p>"); document.write(2+3); document.write(" 명입니다.<br>"); // 다음줄로넘어가기 document.writeln(5); // 다음줄에넘어가지못함 document.writeln(" 명입니다.<br>"); </script> </body> </html> 주목 : 빈칸하나
예제 8-8 write() 를잘못사용하는예 26 <!DOCTYPE html> <html> <head> <title>write() 를잘못사용하는예 </title> </head> <body onclick="document.write('<h3> 클릭되었습니다 </h3>')"> <h3>write() 를잘못사용하는예 </h3> <hr> <p> 웹브라우저의바탕아무곳이나클릭해보세요.</p> </body> </html> 아무곳이나클릭하면오른쪽과같이됨
document 의열기와닫기, open() 과 close() 27 document.open() 현재브라우저에출력된 HTML 콘텐츠를지우고새로운 HTML 페이지시작. 즉 document 객체에담긴 DOM 트리를지우고새로시작 document.close() 예 ) 현재브라우저에출력된 HTML 페이지완성 더이상 document.write() 할수없음 // 현재 HTML 페이지의내용을지우고다시시작 document.open(); document.write( <html><head>...<body> 안녕하세요. ); document.write(... ); document.write( </body></html> ); document.close();
예제 8-9 HTML 문서작성연습페이지만들기 28 <!DOCTYPE html> <html> <head><title>html 문서작성기만들기 </title> <script> var win=null; function showhtml() { if(win == null win.closed) win = window.open("", "outwin", "width=300,height=200"); var textarea = document.getelementbyid("srctext"); win.document.open(); win.document.write(textarea.value); win.document.close(); } </script> </head> <body> <h3>html 문서작성기만들기 </h3> <hr> <p> 아래에 HTML 문서를작성하고버튼을클릭해보세요. 새윈도우에 HTML 문서가출력됩니다.</p> <textarea id="srctext" rows="10" cols="50"></textarea> <br> <br> <button onclick="showhtml()">html 문서출력하기 </button> </body> </html> 버튼을클릭하면새윈도우출력
문서의동적구성 29 DOM 객체동적생성 : document.createelement(" 태그이름 ") 태그이름의 DOM 객체생성 예 ) var newdiv = document.createelement("div"); newdiv.innerhtml = " 새로생성된 DIV 입니다."; newdiv.setattribute("id", "mydiv"); newdiv.style.backgroundcolor = "yellow"; DOM 트리에삽입 부모.appendChild(DOM객체); 부모.insertBefore(DOM객체 [, 기준자식 ]); 예 ) 생성한 <div> 태그를 <p "id=p"> 태그의마지막자식으로추가 var p = document.getelementbyid("p"); p.appendchild(newdiv); DOM 객체의삭제 var removedobj = 부모.removeChild( 떼어내고자하는자식객체 ); 예 ) var mydiv = document.getelementbyid("mydiv"); var parent = mydiv.parentelement; parent.removechild(mydiv); // 부모에서 mydiv 객체삭제
<div> 태그의 DOM 객체동적생성 30 var newdiv = document.createelement("div"); newdiv.innerhtml = " 새로생성된 DIV 입니다."; newdiv.setattribute("id", "mydiv"); newdiv.style.backgroundcolor = "yellow"; <div id="mydiv" style="background-color:yellow"> 새로생성된 DIV 입니다. </div> * 이자바스크립트코드는사실상오른쪽의 <div> 태그정보를가진 DOM 객체생성
예제 8-10 HTML 태그의동적추가및삭제 31 <!DOCTYPE html> <html> <head><title> 문서의동적구성 </title> <script> function creatediv() { var obj = document.getelementbyid("parent"); var newdiv = document.createelement("div"); newdiv.innerhtml = " 새로생성된 DIV 입니다."; newdiv.setattribute("id", "mydiv"); newdiv.style.backgroundcolor = "yellow"; newdiv.onclick = function() { var p = this.parentelement; // 부모 HTML 태그요소 p.removechild(this); // 자신을부모로부터제거 }; obj.appendchild(newdiv); } </script> </head> <body id="parent"> <h3>div 객체를동적으로생성, 삽입, 삭제하는예제 </h3> <hr> <p>dom 트리에동적으로객체를삽입할수있습니다. createelement(), appendchild(), removechild() 메소드를이용하여새로운객체를생성, 삽입, 삭제하는예제입니다.</p> <a href="javascript:creatediv()">div 생성 </a><p> <p> </body> </html> 클릭하면아래와같이 <div> 태그가삽입 클릭하면삭제