XML DOM - Nawigacja w węzłach
Węzły można nawigować za pomocą relacji węzłów.
Poruszanie się po węzłach DOM
Dostęp do węzłów w drzewie węzłów za pośrednictwem relacji między węzłami jest często nazywany „węzłami nawigacyjnymi”.
W XML DOM relacje węzłów są zdefiniowane jako właściwości węzłów:
- rodzicNode
- childNodes
- pierworodny
- ostatnie dziecko
- następny Rodzeństwo
- poprzedniRodzeństwo
Poniższy obraz ilustruje część drzewa węzłów i relacje między węzłami w books.xml :
DOM – węzeł nadrzędny
Wszystkie węzły mają dokładnie jeden węzeł nadrzędny. Poniższy kod prowadzi do węzła nadrzędnego <book>:
Przykład
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Wyjaśnienie przykładu:
- Załaduj " books.xml " do xmlDoc
- Pobierz pierwszy element <książka>
- Wypisz nazwę węzła nadrzędnego węzła „x”
Unikaj pustych węzłów tekstowych
Firefox i niektóre inne przeglądarki będą traktować puste odstępy lub nowe wiersze jako węzły tekstowe, Internet Explorer nie.
Powoduje to problem podczas korzystania z właściwości: firstChild, lastChild, nextSibling, previousSibling.
Aby uniknąć nawigowania do pustych węzłów tekstowych (spacji i znaków nowej linii między węzłami elementów), używamy funkcji sprawdzającej typ węzła:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
Powyższa funkcja umożliwia użycie get_nextSibling( node ) zamiast właściwości node .nextSibling.
Wyjaśnienie kodu:
Węzły elementów są typu 1. Jeśli węzeł siostrzany nie jest węzłem elementu, przechodzi do kolejnych węzłów, aż do znalezienia węzła elementu. W ten sposób wynik będzie taki sam w przeglądarce Internet Explorer i Firefox.
Zdobądź pierwszy element potomny
Poniższy kod wyświetla pierwszy węzeł elementu pierwszego <book>:
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;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Wyjście:
title
Wyjaśnienie przykładu:
- Załaduj " books.xml " do xmlDoc
- Użyj funkcji get_firstChild na pierwszym węźle elementu <book>, aby uzyskać pierwszy węzeł podrzędny, który jest węzłem elementu
- Wypisz nazwę węzła pierwszego węzła podrzędnego, który jest węzłem elementu
Więcej przykładów
W tym przykładzie użyto metody lastChild() i funkcji niestandardowej, aby uzyskać ostatni węzeł podrzędny węzła
W tym przykładzie zastosowano metodę nextSibling() i funkcję niestandardową, aby uzyskać następny węzeł rodzeństwa węzła
W tym przykładzie zastosowano metodę previousSibling() i funkcję niestandardową w celu pobrania poprzedniego węzła rodzeństwa węzła