XML 애플리케이션
이 장에서는 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 튜토리얼을 방문하세요.
