Lokalizacja węzłów DOM XML

Węzły mogą być lokalizowane za pomocą relacji między węzłami.

Wyznaczanie węzłów DOM

Dostęp do węzłów w drzewie węzłów za pomocą relacji między węzłami, często nazywany "wyznaczaniem węzłów" (lub nawigacją węzłów, navigating nodes).

W XML DOM, relacje między węzłami są zdefiniowane jako atrybuty węzłów:

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

Poniższy obraz pokazuje books.xml Jest częścią drzewa węzłów DOM i wyjaśnia relacje między węzłami:

Drzewo węzłów DOM

DOM - rodzic

Każdy węzeł ma tylko jednego rodzica. Poniższy kod nawiguje do rodzica <book>:

Przykład

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

Spróbuj sam!

Wyjaśnienie przykładu:

  1. Przykład: books.xml załadowany do xmlDoc w
  2. Pobierz pierwszy element <book>
  3. Wypisz nazwę węzła rodzica "x"

Unikaj pustych węzłów tekstowych

Niektóre przeglądarki mogą traktować puste lub nową linię jako węzły tekstowe. To może powodować problemy przy użyciu następujących atrybutów:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Aby uniknąć nawigacji do pustych węzłów tekstowych (spacji i znaków nowej linii między węzłami elementowymi), używamy funkcji do sprawdzania typu węzła:

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

Z powyższych funkcji możemy używać get_nextSibling(node) zamiast właściwości node.nextSibling.

Wyjaśnienie kodu:

Typ węzła elementu wynosi 1. Jeśli węzeł równoległy nie jest węzłem elementu, przesuń się do następnego węzła, aż znajdziesz węzeł elementu.

Uzyskaj pierwszy element podznode

Poniższy kod wyświetla pierwszy element <book> jako pierwszy element podznode:

Przykład

<!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;
}
// Sprawdź, czy pierwszy węzeł jest węzłem elementu
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Spróbuj sam!

Wyjaśnienie przykładu:

  1. Przykład: books.xml Załaduj do xmlDoc
  2. Użyj funkcji get_firstChild na pierwszym węźle <book>, aby uzyskać pierwszy podznode.
  3. Wypisz nazwę węzła pierwszego podznode.

Więcej przykładów

lastChild()
Używaj metody lastChild() i własnej funkcji, aby uzyskać ostatni podznode węzła.
nextSibling()
Używaj metody nextSibling() i własnych funkcji do uzyskania następnego brata węzła.
previousSibling()
Używaj metody previousSibling() i własnych funkcji do uzyskania poprzedniego brata węzła.