작성자가 등록한 다른 큐
댓글을 작성하기 위해서는 먼저
로그인
하셔야 합니다.
현재 댓글의 수는
0
개 입니다.
Page 0:
Page 1: 문서 객체 모델(DOM)
2008. 5. 29
강의자료의 예제는 “DOM 스크립트” (에이콘)의 책에 수록된 것을 사용하였음
Page 2: Document Object Model(1)
• Document
– 웹 문서를 의미한다.
• Object
– 웹 문서를 객체로 다룬다. – 초기 자바스크립트에서는 window(브라우저 창)를 최상위 객체로서 취급하였다. – DOM에서는 웹 문서의 모든 요소를 체계적인 모델에 의해서 객체로 취급하게 된다.
Page 3: Document Object Model(2)
• Model
– 문서의 구성 요소를 트리(tree) 구조의 모델로 표현한다. – 예를 들면 다음과 같은 웹 문서는 다음 페이지 의 트리 구조로서 표현된다.
Page 4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Shopping list</title> </head> <body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff.</p> <p>This is just a test</p> <ul id="purchases"> <li>A tin of beans</li> <li>Cheese</li> <li>Milk</li> </ul> </body> </html>
Page 5: html
head
body
meta
title
h1
p
p
ul
li
li
li
Page 6: 노드(node)
• 문서는 트리 구조로서 표현된다. 따라서 문서는 트리의 노드로서 구성된다. • 노드
– 요소(element) 노드 – 텍스트 노드
• 문서에서 HTML tag 요소 부분 • 요소의 내용 • 예를 들면, 앞의 예제에서 <p>요소 노드의 “Don’t forget to buy this stuff”이다. • 요소 노드가 갖는 속성 부분 • 예를 들면 <p title=“a gentle reminder”…>에서 title=“a gentl reminder”는 속성 노드이다.
– 속성 노드
Page 7: p
요소 노드 html
title= “a gentle reminder” head 속성 노드
Don’t forget to buy this body stuff.
텍스트 노드
meta
title
h1
p
p
ul
li
li
li
Page 8: 노드에 접근: 메소드
• 자바스트립트의 목표는 사용자가 웹 문서를 동작 시킬 때 동적인 동작(예, interactive)이 가능하도 록 하는데 있다. • 이를 위해 자바스크립트는 문서의 필요한 부분을 객체로 하여 어떤 event가 발생했을 때 문서의 특 정 부분에 특정 동작이 가능하도록 하였다. • DOM에서는 이 개념을 확대하여 문서의 모든 요 소를 객체로 하여 메소드를 통해서 접근할 수 있 도록 한다.
Page 9: getElementById 메소드
• doucment.getElementById(“purchases”)
– HTML 문서에서 purchases라고 지정된 id 속성 을 포함하는 요소에 접근하게 된다. – 예제: exam.html
Page 10: getElementByTagName 메소드
• document.getElementByTagName(“li”)
– “li” tag를 갖는 모든 요소들을 리턴한다.
• document.getElementByTagName(“li”).length
– li tag를 갖는 요소 목록들의 개수를 리턴한다. – Ex, example2.html
Page 11: getAttribute
• object.getAttribute(attribute) • 요소 노드에서 동작하며 요소 노드가 갖고 있는 “attribute”의 값을 리턴한다. • Ex, example3.html, example4.html
var paras = document.getElementsByTagName(“p”); for (var i=0; i<paras.length; i++) {` alert(paras[i].getAttribute(“title”)); }
결과는 경고창에 첫번째 <p>의 title인 “a gentle reminder”이 보이고 두번째 <p>의 title은 없으므로 아무 내용도 보이지 않는다.
Page 12: setAttribute
• object.setAttribute(attribute, value) • 요소 노드에서 적용하며 요소 노드가 갖고 있는 “attribute”의 값을 value로 변경한다. • Ex. example5.html, example6.html
var shopping = document.getElementsById(“purchase”); shopping.setAttribute(“title”, “a list of goods”);
Page 13: 온라인 사진첩 만들기(HTML 부분)
• /chap4/image_gallery/01/gallery.html • 하지만 이 프로그램은 사진 링크를 클릭하면 다 른 문서에서 사진을 보여준다. • 만약 사진 링크를 클릭하면 같은 문서에서 사진 을 보여주도록 하고 싶다면 어떻게 할까?
– 목록이 있는 문서에 그림이 들어갈 위치를 지정한다. – 링크를 클릭하면 사용자 동작을 해석한다. – 지정된 위치에 링크로부터 받은 그림을 보여 준다.
• 따라서 문서 아래쪽에 다음의 문장을 삽입한다.
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
Page 14: 온라인 사진첩 만들기 (자바스크립트 부분)
• 같은 문서에서 사진을 보이기 위해서는 “placeholder”의 “src” 속성값을 선택한 사진 image로 변경하면 된다. • 이를 위해 다음과 같은 함수를 만들고 선택한 사 진의 요소 노드를 인자로 넘겨준다.
function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); }
Page 15: 이벤트 핸들러(event handler)
• 이벤트 핸들러는 어떤 동작이 발생했을 때 자바 스크립트를 호출한다.
– 이벤트 이름 = “자바 스크립트 명령문”
• onclick = “showPic(this)” • 링크를 클릭했을 때 href 속성을 가진 요소 노드를 showPic 함 수로 전달한다. 이를 위해 자신의 객체를 나타내는 “this”를 인자로 사용한다.
• 그러나, 이렇게 하면 링크를 클릭하는 순가 함수 를 호출함과 동시에 링크 동작도 함께 수행된다. 그러면 링크한 사진만 새 화면에 표시된다.
Page 16: 이벤트 핸들러의 동작 순서
• 1.이벤트 발생시 자바스크립트 명령문을 실행한 다. • 2. 이벤트 실행 여부를 true 혹은 false 값으로 반 환하다.
– True: “네, 이 링크를 클릭했습니다.” – Falese: “아니오, 이 링크를 클릭하지 않았습니다.”
• 따라서 “return false”를 넣으면 링크로 이동하는 것을 막을 수 있다.
– onclick = “showPic(this); return false;”
• /chap4/image_gallery/02/gallery.html
Page 17: 사진 아래에 title 넣기
• 선택한 사진 밑에 사진의 title을 넣으려 한 다. • 이를 위해서 앞에서 배운 getAttribute 함수 를 사용하여 title 속성값을 가져와서 사진 밑에 써 넣으면 된다.
– var titletext = whichpic.getAttribute(“title”);
Page 18: childNodes 속성
• childNodes를 사용하여 노드 트리의 모든 요 소의 자식에 대한 정보를 가져올 수 있다.
– childNodes는 요소 노드의 모든 자식을 포함하 는 배열을 반환한다. – element.childNodes – element.childNodes.length
• document.getElementsByTagName(“body”)[ 0].childNodes
Page 19: nodeType 속성
• 다음의 프로그램을 실행해 보라.
– /chap4/image_gallery/04/childnodes.html – body 요소의 총 자식 요소 개수를 표시하는 경고창을 보여준다. – 이 프로그램의 body 요소는 h1, ul, img 요소 3개이다. 그러나 실제는 5개로 나온다. 이것은 요소 노드 뿐 아 니라 모든 형식의 노드를 가져오기 때문이다.
• 그러면 원하는 노드를 어떻게 가져올 수 있을까?
– node.nodeType
Page 20: nodeValue 속성
• 텍스트 노드의 값을 변경하려면 nodeValue 속성을 사용한다.
– node.nodeValue
• gallery.html에 다음의 코드를 첨가하고 결 과를 보자.
– <script> – alert (description.childNodes[0].nodeValue); – </script> – “choose a image”의 경고창이 뜰 것이다.
Page 21: firstChild와 lastChild
• childNodes 배열의 첫번째 자식 노드를 얻 으려 할 경우 다음과 같이 한다. 두 코드는 동일하다.
– node.firstChild – node.childNodes[0]
• 또한 다음의 두 코드는 동일한다.
– node.lastChild – node.childNodes[length-1]
Page 22: • P노드(<p id="description">Choose an image.</p>)에는 하나의 자식 노드가 있 다. • 이 노드는 다음과 같이 가져올 수 있다.
– description.firstChild
• 이 노드의 test 값은 다음과 같이 가져올 수 있다.
– description.firstChild.nodeValue
Page 23: showPic 함수의 추가
• showPic 함수에 다음의 코드를 추가한다.
function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; }
Page 24: 정리
• 이제까지 우리는 HTML, CSS, JSP(ASP, PHP), Javascript를 배웠다. 이것들은 우리 가 웹 프로그래밍을 하는데 있어서 각기 다 른 기능을 수행한다. • Client 쪽 웹 문서를 작성할 때 관련되는 것 이 HTML, CSS, JSP이다. 이 세 가지는 웹 문서를 작성하는데 있어서 각기 다른 기능 을 담당하고 있다.
Page 25: • HTML
– 문서의 구성을 담당한다.
• CSS
– 문서의 표현을 담당한다.
• Javascript
– 문서의 동적인 동작을 담당한다.
• 따라서 웹 문서를 작성하는데 있어서 바람 직한 방법은 이 세 가지 기능을 각각 구분 해서 작성하는 것이다.
Page 26: