Aplikasi XML
Bab ini menunjukkan beberapa kecil berbasis XML aplikasi XML, HTML, DOM XML dan JavaScript dibangun.
XML contoh dokumen
Dalam aplikasi ini, kita akan menggunakan "cd_catalog.xml" berkas.
Menampilkan CD dalam elemen HTML div
Contoh berikut mendapatkan data XML dari elemen pertama dari CD, dan kemudian menampilkan data dalam id = "showCD" elemen HTML. displayCD () function dipanggil ketika beban halaman:
contoh
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;
}
Coba »
Tambahkan script navigasi
Untuk menambahkan navigasi (fungsi) untuk contoh di atas, kita perlu menciptakan berikutnya () dan sebelumnya () dua fungsi:
contoh
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();
}
}
Coba »
Ketika Anda mengklik informasi album CD ditampilkan saat
Contoh terakhir menunjukkan cara untuk menampilkan informasi album ketika pengguna mengklik pada sebuah proyek CD:
Coba .
Untuk informasi lebih lanjut tentang menggunakan JavaScript dan XML DOM, kunjungi XML DOM tutorial .