XML 응용 프로그램
이 장에서는 내장 된 몇 가지 작은 XML 기반 응용 프로그램 XML, HTML, XML의 DOM 및 JavaScript를 보여줍니다.
XML 문서 인스턴스
이 응용 프로그램에서 우리는 사용합니다 "cd_catalog.xml" 파일을.
HTML DIV 요소에 CD를보기
다음의 예는 CD의 첫 번째 요소로부터 XML 데이터를 얻고, 그 ID = "showCD"HTML 요소에 데이터를 표시. displayCD () 함수가 호출 될 때 페이지가로드 :
예
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;
}
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;
}
»시도
네비게이션 스크립트를 추가합니다
위의 예에 탐색 (기능)을 추가하기 위해, 우리는) 두 가지 기능을합니다 ((다음) 및 이전을 작성해야합니다 :
예
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();
}
}
{ // 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 프로젝트를 클릭 할 때 앨범 정보를 표시하는 방법을 보여줍니다
보십시오 .
자바 스크립트와 XML DOM을 사용하는 방법에 대한 자세한 내용은, 우리의 방문 XML DOM 튜토리얼 .