Menempatkan Node XML DOM

Node dapat ditentukan melalui hubungan antar node.

Contoh

Contoh di bawah ini menggunakan berkas XML books.xml.

Fungsi loadXMLDoc()yang berada di JavaScript eksternal, digunakan untuk memuat berkas XML.

Mendapatkan node orang tua
Contoh ini menggunakan atribut parentNode untuk mendapatkan node orangtua.
Ambil anak pertama node
Contoh ini menggunakan metode firstChild() dan fungsi yang disusun untuk mendapatkan anak pertama dari node.

Navigasi DOM node

Mengakses node dalam pohon node melalui hubungan node, biasa disebut navigasi node ("navigating nodes").

Dalam XML DOM, hubungan node didefinisikan sebagai atribut node:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Gambar di bawah ini menunjukkan books.xml Sebagian dari pohon node DOM, dan menjelaskan hubungan antar node:

Pohon node DOM

DOM - Node orangtua

Seluruh node hanya memiliki satu node orangtua. Kode di bawah ini menempatkan node orangtua <book>:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

Penjelasan contoh:

  • Dengan menggunakan loadXMLDoc() Buat \books.xmldapat disimpan ke xmlDoc
  • Ambil elemen <book> pertama
  • Keluaran nama node induk dari "x"

TIY

hindari node teks kosong

Firefox dan beberapa browser lainnya menganggap spasi dan garis baru kosong sebagai node teks, sementara IE tidak melakukan hal seperti itu.

Ini akan menyebabkan masalah saat menggunakan properti berikut: firstChild, lastChild, nextSibling, previousSibling.

Untuk menghindari menempatkan node teks kosong (spasi dan garis baru antara node elemen), kita menggunakan fungsi untuk memeriksa tipe node:

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}

Dengan fungsi di atas, kita dapat menggunakan get_nextSibling(node) untuk menggantikan properti node.nextSibling.

Pengertian kode:

Tipe node elemen adalah 1. Jika node tingkat yang sama bukan node elemen, pindah ke node berikutnya sampai menemukan node elemen. Dengan cara ini, di IE dan Firefox dapat mendapatkan hasil yang sama.

Ambil elemen pertama

Kode di bawah ini menampilkan elemen pertama <book> node pertama:

<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
<script type="text/javascript">
//cek jika node pertama adalah node elemen
fungsi get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

Output:

title

Penjelasan contoh:

  • Dengan menggunakan loadXMLDoc() Buat \books.xml"Diunggulkan ke xmlDoc"
  • Gunakan fungsi get_firstChild di <book> pertama untuk mendapatkan anak pertama dalam node elemen
  • Output nama node pertama anak (node elemen)

TIY

Contoh

Contoh di bawah ini menggunakan fungsi yang sama:

  • firstChild: TIY
  • lastChild: TIY
  • nextSibling: TIY
  • previousSibling: TIY