과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi
10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document 객체와관련된객체들의집합 이를이용하면 HTML페이지에동적으로태그를추가, 수정, 삭제할수있음
10.1 문서객체모델과관련된용어정리 용어정리 태그 코드 10-1 문서객체 <html> 이나 <body> HTML 태그를자바스크립트에서사용할수있도록객체로만든것 코드 10-1, 10-2 var header = document.getelementbyid( header ) header 라는 id를갖는객체 ( 태그 ) 를자바스크립트로가져옴 변수 header가가리키는것이문서객체임
10.1 문서객체모델과관련된용어정리 용어정리 문서객체모델 HTML 페이지는노드들로구성된트리형태 그림 10-1: 코드 10-1의문서객체모델 그림 10-2: 코드 10-3의문서객체모델 Element Node( 요소노드 ) 문서객체모델에서, HTML 태그에해당하는노드 Text Node( 텍스트노드 ) Element node 안에있는스트링
10.2 문서객체만들기 (1) 문서객체의종류 텍스트노드를갖는문서객체 텍스트노드를갖지않는문서객체 노드생성방법 document.createelement(tagname) 요소노드를생성하는방법 document.createtextnode(text) 텍스트노드를생성하는방법
10.2 문서객체만들기 (1) 코드 10-5 <h1> 에해당하는요소노드생성 document.createelement( h1 ) Hello DOM 에해당하는텍스트노드생성 document.createtextnode( Hello DOM )
10.2 문서객체만들기 (1) 문서객체연결메소드 appendchild(node) 코드 10-6 Hello DOM 텍스트노드를 <h1> 요소노드에자식으로붙인후, header.appendchild(textnode) <h1> 요소노드를 <body> 문서객체의자식으로붙임 document.body.appendchild(header)
10.3 문서객체만들기 (2) 텍스트노드를갖지않는노드생성 코드 10-7 <img> 요소노드생성 var img = document.createelement( img ) 코드 10-8 <img> 태그에속성값지정 img.src = Penguins.jpg ; 크롬브라우저에서 요소검사 기능으로확인가능함 이러한방식은, 웹브라우저에서지원하는속성에만사용가능함 그렇지않은경우에는표10-3( 다음페이지 ) 의메소드를사용해야함
10.3 문서객체만들기 (2) 표10-3 setattribute(name, value): 객체의속성값을지정함 getattribute(name): 객체의속성값을가져옴 코드 10-9 img.setattribute( data-property, 350); 참고사항 data-* 형식의속성은, custom data attribute( 사용자정의속성 ) 을추가할때사용함 (HTML5 에서새롭게추가됨 ) 예 : <li data-animal-type="bird">owl</li> <li data-animal-type="fish">salmon</li> <li data-animal-type="spider">tarantula</li>
10.4 문서객체만들기 (3) innerhtml 속성 현재문서객체의태그내부를의미하는속성 예 : <h1>hello DOM..!</h1> <h1> 태그의 innerhtml 속성값 코드 10-11 document.body의 innerhtml에 HTML 태그들로구성된문자열을지정하면웹문서가만들어짐 document.body.innerhtml = <ul> </ul> document.body.innerhtml += <h1>dom</h1>
10.4 문서객체만들기 (3) innerhtml 속성의값변경가능여부 인터넷익스플로러를제외한브라우저는, 모든문서객체의 innerhtml 속성의값을변경할수있다. 인터넷익스플로러의경우, 다음태그의 innerhtml 속성의값을변경할수없다. col, colgroup, frameset, head, html, style, table, tbody, tfoot, thead, title, tr 태그
10.4 문서객체만들기 (3) <h1>dom</h1> 라는문자열이화면에그대로나오게하려면, 1) innerhtml 속성에 <h1>dom</h1> 를지정하면됨 (character entity 사용 ) 2) textcontent 속성을이용하면더쉽다. 코드 10-12 document.body.textcontent = <h1>dom</h1> ;
10.5 문서객체가져오기 (1) HTML 태그에해당하는문서객체가져오기 document 객체의 getelementbyid(id) 메소드이용 태그의 id 속성값이매개변수 id 와일치하는문서객체를가져옴 코드 10-14, 10-15
10.6 문서객체가져오기 (2) 한번에여러개의문서객체를가져오는메소드 표 10-5 document.getelementsbyname(name) 태그의 name 속성이매개변수 name과일치하는문서객체들을배열로가져올때사용함 document.getelementsbytagname(name) 태그의이름과매개변수 name 이일치하는문서객체들을배열로가져올때사용함 코드 10-16, 10-17 var headers = document.getelementsbytagname( h1 ); headers[i] 로문서객체를접근함 코드 10-18 for-in 반복문을사용하지말고 ( 코드 10-19 참조 ), 일반 for 문으로문서객체들을방문할것
10.7 문서객체가져오기 (3) 표 10-6(HTML5 에서추가됨 ) document.queryselector(css선택자 ) CSS선택자로가장처음선택되는문서객체를가져옴 document.queryselectorall(css선택자 ) 선택자로선택되는모든문서객체들의배열을가져옴 코드 10-20 예 : document.queryselector( #header-1 ) CSS 선택자 : #header-1 id 속성의값이 header-1 인첫번째태그를선택하라 CSS 선택자의자세한내용은 2 부에서배울예정임
10.8 문서객체의스타일조작 문서객체의 style 속성 style 속성을이용하면, 해당문서객체의스타일을변경할수있음 코드 10-22 var header = document.getelementbyid('header'); header.style.border = '2px solid black'; header.style.color = 'orange'; header.style.fontfamily = 'helvetica';
10.8 문서객체의스타일조작 Note: 스타일속성이름 CSS 에서의스타일속성이름을자바스크립트에서그대로사용가능함 단, CSS 에서의스타일속성이름에하이픈 ( - ) 이포함된경우 하이픈 ( - ) 을제거하고, 하이픈 ( - ) 다음의단어첫글자를대문자로바꾸어서자바스크립트에서사용한다. 이유 : 자바스크립트에서는특수기호인하이픈 ( - ) 을식별자로사용하지못하기때문 예 : CSS에서스타일속성이름이 background-color 인경우 자바스크립트에서는 backgroundcolor라는이름으로사용해야함 header.style.backgroundcolor = red ; ( 맞음 ) header.style.background-color = red ; ( 틀림, 오류발생함 )
10.9 문서객체제거 표10-8 문서객체의 removechild(child) 이용 문서객체의자식노드인 child를제거함 코드 10-24 var willremove = document.getelementbyid( will-remove); document.body.removechild(willremove); == willremove.parentnode.removechild(willremove);
10.10 문서객체를사용한시계 예제 : 문서객체로현재시간을표시하는시계 코드 10-25 clock 이라는 id 를갖는 <h1> 태그추가 코드 10-26, 10-27 setinterval( ) 함수를이용해서, 1초에한번씩 clock 문서객체의 innerhtml 속성을현재시간으로변경함
10.11 문서객체를사용한움직임구현 예제 : 궤도를따라이동하는지구와달구현 코드 10-28 지구, 태양, 달을나타내는 <h1> 태그입력 코드 10-29 지구, 태양, 달을나타내는 <h1> 태그에대한문서객체얻어옴 코드 10-30 지구, 태양, 달문서객체의 position 스타일속성을 absolute 로지정함 ( 부모를기준으로왼쪽에서몇픽셀, 위에서몇픽셀을지정해서문서객체가위치할좌표를결정함 ) 태양의좌표를지정함
10.11 문서객체를사용한움직임구현 예제 : 궤도를따라이동하는지구와달구현 ( 계속 ) 코드 10-31 setinterval(function(){ // 지구, 달의움직임구현 }, 1000/3); 1 초에 30 번움직임을구현하는함수를호출함
10.11 문서객체를사용한움직임구현 예제 : 궤도를따라이동하는지구와달구현 ( 계속 ) 코드 10-32( 지구와달의움직임구현 ) 태양, 지구, 달의좌표계산 태양의좌표 : (250, 200) 로고정 earthangle이 θ 이면 지구의 left 좌표는 250에 150*cos(θ) 를더함 지구의 top 좌표는 250에 150*sin(θ) 를더함 달도마찬가지로좌표를계산함 계산된좌표를지구와달의 left, top 속정에지정 earchangle은 0.1, moonangle은 0.3 증가시킴 S 150 θ (250, 200) E
10.12 문서객체와객체지향을사용한움직임구현 예제 : 각자해볼것 ( 코드 10-40) MovingText( ) 생성자함수정의 move( ) 를이용해서움직임구현 left 스타일속성과 top 스타일속성을이용하여위치를조정함 MovingText 객체 100개를담는배열생성 setinterval 함수를이용하여 MovingText 객체 100개의 move( ) 메소드를호출하는함수를주기적으로실행함