XML DOM Lanjutan
XML DOM - Lanjutan
Dalam bab awal tutorial ini, kami memperkenalkan XML DOM dan menggunakan kaedah getElementsByTagName() XML DOM untuk mendapatkan data daripada dokumen XML untuk mendapatkan semula data.
Dalam bab ini kami akan menggabungkan beberapa kaedah DOM XML penting lain.
Anda boleh mengetahui lebih lanjut mengenai XML DOM dalam tutorial XML DOM kami.
Dapatkan nilai elemen
Fail XML yang digunakan dalam contoh di bawah: books.xml.
Contoh berikut mendapatkan semula nilai teks elemen <title> pertama:
Contoh
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Dapatkan nilai atribut
The contoh berikut mendapatkan semula nilai teks pertama atribut "lang" bagi elemen <title> > Running Instance»
The contoh berikut menukar nilai <tajuk> nilai teks elemen pertama:
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>Jalankan Instance»
Kaedah setAttribute() XML DOM boleh digunakan untuk menukar nilai atribut sedia ada, atau mencipta atribut baharu.
Contoh berikut mencipta atribut baharu (edition="first") dan menambahkannya pada setiap <book>
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>Klik butang "Run Instance" untuk melihat contoh dalam talian
Creation The createElement( ) kaedah elemenUntuk mencipta elemen baharu dengan kandungan teks, anda perlu mencipta nod elemen baharu dan nod teks baharu pada masa yang sama, dan kemudian menambahkannya pada nod sedia ada.
Contoh berikut mencipta elemen baharu (<edisi>) dengan teks berikut: Mula-mula, dan kemudian menambahkannya pada <buku> yang pertama:
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("edition","first");
}
//Output all attribute values
for (i=0;i<x.length;i++)
{
document.write("Category: " + x[i].getAttribute('category') + "<br>");
document.write("Edition: " + x[i].getAttribute('edition') + "<br>");
}
</script>
</body>
</html>Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Penjelasan contoh
Buat <edisi> elemen
Buat nod teks dengan nilai "Pertama"
-
Tambahkan nod teks ini pada elemen <edisi> baharu
Tambahkan elemen <edisi> pada elemen <buku> >
Padam elemen
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);
for (i=0;i<x[0].childNodes.length;i++)
{
if (x[0].childNodes[i].nodeType==1)
{
document.write(x[0].childNodes[i].nodeName);
document.write(": ");
document.write(x[0].childNodes[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
</body>
</html>Klik "Run instance" butang untuk melihat dalam talian Contoh Nota:
