Download
1 / 7
70 likes | 215 Views
Ajax (0927-Ajax-5). 2007. 9. scpark@dit.ac.kr. 4. 도큐먼트 객체 모델. DOM(Document Object Model) 의 사용이유 ? 사용자의 동작에 바로 응답하고 , 필요없는 리로드를 제거 보다 역동적인 웹 애플리케이션 제작이 용이. 4. 도큐먼트 객체 모델. “ document ” 객체는 자바 스크립트에서 웹 브라우저의 DOM 나무를 사용할 수 있게 해준다 . 사용예 : var cashE1 = document.getElementById( “ cash ” );
E N D
Ajax(0927-Ajax-5) 2007. 9. scpark@dit.ac.kr
4. 도큐먼트 객체 모델 • DOM(Document Object Model)의 사용이유? • 사용자의 동작에 바로 응답하고, • 필요없는 리로드를 제거 • 보다 역동적인 웹 애플리케이션 제작이 용이
4. 도큐먼트 객체 모델 • “document”객체는 자바 스크립트에서 웹 브라우저의 DOM 나무를 사용할 수 있게 해준다. • 사용예: var cashE1 = document.getElementById(“cash”); var phone = document.getElementById(“phone”).value
4. 도큐먼트 객체 모델 • 웹 브라우저가 만든 웹 페이지 모델의 모든 부분은 자바 스크립트의 “document”객체를 통해 접근할 수 있다. • 자바 스크립트에서는 그냥 “document”라고 쓰기만 하면 언제든 이 객체를 사용할 수 있다. • DOM 은 Ajax와 어울리지만…그렇다고 DOM이 Ajax의 일부분은 아니며, 웹 애플리케이션에서 DOM은 어떤 경우든지 사용이 가능하다. • 즉, DOM을 사용하면, 비동기 요청을 사용하지 않더라도 페이지 리로드가 없는 보다 역동적인 페이지 구현이 가능해 진다.
4. 도큐먼트 객체 모델 - 예시 아래의 HTML문서의 DOM tree를 그려보자. <html> <head> <title>Binary Tree Selection</title> </head> <body> <p>Below are two binary tree options:</p> <div> Our <em>depth-first</em> trees are great for folks that are far away. </div> <div> Our <em>breadth-first</em> trees are a favorite for nearby neighbors. </div> <p>You can view other products in the <a href=“main.html”>Main Menu</a>.</p> </body> </html>
div em “breadth-first” 4. 도큐먼트 객체 모델 • DOM tree의 모든 것은 노드로 구성되어 있고, • 언제든 노드가 있으면 nodeName으로 노드의 이름을 알수 있고, nodeValue로 노드의 값을 알 수 있다. • 엘리먼트 노드는 “div”, “img”등과 같은 이름은 있지만, 값이 없는 반면,
