Pencarian Nod DOM XML

Dapat dilakukan dengan menggunakan hubungan antar node untuk menempatkan node.

Lokasi DOM node

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

Dalam XML DOM, hubungan node didefinisikan sebagai properti node:

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

Gambar di bawah menunjukkan books.xml sebagian dari pohon node dan menjelaskan hubungan antar node:

Tunggak Nod DOM

DOM - node induk

Semua node hanya memiliki satu node induk. Kode berikut mengnavigasi ke node induk <book>:

Contoh

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

Cuba sendiri

Pengertian contoh:

  1. Tunjuk books.xml diload ke xmlDoc di
  2. mendapatkan elemen <book> pertama
  3. Output nama node induk dari "x"

hindari node teks kosong

Beberapa peramban mungkin menganggap spasi atau garis baru sebagai node teks. Ini akan menyebabkan masalah saat menggunakan properti berikut:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Untuk menghindari navigasi ke node teks kosong (spasi dan garis baru 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 boleh menggunakan get_nextSibling(node) untuk menggantikan properti node.nextSibling.

Pengertian kod:

Jenis nod element adalah 1. Jika nod tingkatan yang sama bukan nod element, pindahkan ke nod berikutnya sehingga mendapatkan nod element.

Dapatkan nod anak pertama

Kod di bawah ini menunjukkan nod element pertama daripada <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;
}
// Memeriksa apakah nod pertama adalah nod element
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Cuba sendiri

Pengertian contoh:

  1. Tunjuk books.xml Dimuat ke xmlDoc
  2. Gunakan fungsi get_firstChild di atas nod <book> pertama untuk mendapatkan nod anak pertama
  3. Output nama nod pertama anak element

Contoh lain

lastChild()
Menggunakan kaedah lastChild() dan fungsi yang disusun untuk mendapatkan anak terakhir daripada nod.
nextSibling()
使用 nextSibling() 方法和自定义函数来获取节点的下一个同胞节点。
previousSibling()
使用 previousSibling() 方法和自定义函数来获取节点的上一个同胞节点。