Pencarian Node DOM XML

lokasi node dapat dilakukan melalui hubungan antar node.

lokasi DOM node

Mengakses node di pohon node tree melalui hubungan antar node, biasanya disebut "lokasi node" (atau navigasi node, navigating nodes).

Dalam XML DOM, hubungan node didefinisikan sebagai atribut node:

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

Gambar di bawah menunjukkan books.xml menampilkan bagian dari pohon node DOM dan menjelaskan hubungan antar node:

Pohon Node DOM

DOM - node orangtua

Setiap node hanya memiliki satu node orangtua. Kode berikut ini menavigasi ke node orangtua <book>:

Contoh

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Coba sendiri

Pengertian contoh:

  1. Jadi books.xml diunggulkan ke xmlDoc di
  2. ambil elemen <book> pertama
  3. output nama node induk dari "x"

hindari node teks kosong

Beberapa peramban mungkin menganggap spasi atau paragraf sebagai node teks. Ini akan menyebabkan masalah saat menggunakan atribut berikut:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Untuk menghindari navigasi ke node teks kosong (spasi dan paragraf antara node elemen), kami menggunakan fungsi untuk memeriksa tipe node:

function get_nextSibling(n) {
    var 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.

Ambil elemen anak pertama

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

Contoh

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}
// Periksa apakah node pertama adalah node elemen
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Coba sendiri

Pengertian contoh:

  1. Jadi books.xml Dimuat ke xmlDoc
  2. Gunakan fungsi get_firstChild di atas elemen node <book> pertama untuk mendapatkan elemen anak pertama
  3. Keluaran nama node dari elemen anak pertama

Contoh lebih banyak

lastChild()
Gunakan metode lastChild() dan fungsi yang dibuat sendiri untuk mendapatkan node anak terakhir.
nextSibling()
Gunakan metode nextSibling() dan fungsi khusus untuk mengambil node kematangan berikutnya dari node.
previousSibling()
Gunakan metode previousSibling() dan fungsi khusus untuk mengambil node kematangan sebelumnya dari node.