이 장에서는 XML, HTML, XML DOM 및 JavaScript를 기반으로 구축된 몇 가지 작은 XML 애플리케이션을 보여줍니다.

XML 문서 예제

이 애플리케이션에서는 "cd_catalog.xml" 파일을 사용합니다.

HTML div 요소에 첫 번째 CD 표시

다음 예에서는 첫 번째 CD 요소에서 XML 데이터를 가져온 다음 id="showCD를 사용하여 HTML 요소에 표시합니다. " 데이터를 표시합니다. 페이지가 로드되면 displayCD() 함수가 호출됩니다.

Instance

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}

Run Instance»

"실행"을 클릭합니다. 인스턴스" 온라인 인스턴스 보기 버튼

탐색 스크립트 추가

위 인스턴스에 탐색(기능)을 추가하려면, next()를 생성해야 하며 이전() 두 함수:

Instance

function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}

function previous()
{ // displays the previous CD, unless you are on the first CD 
if (i>0)
{
i--;
displayCD();
}
}

인스턴스 실행 중»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


CD 클릭 시 앨범 정보 표시

마지막 예에서는 사용자가 CD 항목을 클릭할 때 앨범 정보를 표시하는 방법을 보여줍니다.

사용해 보세요.

JavaScript 및 XML DOM 사용에 대해 자세히 알아보려면 XML DOM 튜토리얼을 방문하세요.