XML 애플리케이션

XML 애플리케이션

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

XML 문서 예

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

HTML div 요소에 첫 번째 CD 표시

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

예

 x=xmlDoc.getElementsByTagName("CD");
나는=0;

함수 표시CD()
{
아티스트=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("연도")[0].childNodes[0].nodeValue);
txt="아티스트: " + 아티스트 + "<br />제목: " + 제목 + "<br />연도: "+ 연도;
document.getElementById("showCD").innerHTML=txt;
}

시도해 보세요 »

탐색 스크립트 추가

위의 예에 탐색(기능)을 추가하려면 next() 및 이전()이라는 두 가지 함수를 만들어야 합니다.

예

 함수 다음()
{ // 마지막 CD가 아니라면 다음 CD를 표시합니다.
if (i<x.길이-1)
{
나++;
디스플레이CD();
}
}

함수 이전()
{ // 첫 번째 CD를 사용하지 않는 한 이전 CD를 표시합니다.
만약 (i>0)
{
나--;
디스플레이CD();
}
}

시도해 보세요 »

CD를 클릭하면 앨범 정보 표시

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

한번 시도해 보세요.

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