Węzły można nawigować za pomocą relacji węzłów.
Nawigacja DOM węzłów
Dostęp do węzłów w drzewie węzłów poprzez stosunek pomiędzy węzłami jest często nazywany "navigating nodes" .
W XML DOM, relacje węzłowe są zdefiniowane jako właściwości do węzłów:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
Poniższy rysunek przedstawia fragment drzewa węzłów i relacji 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 przechodzi 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;
}
Spróbuj sam " Przykład wyjaśnił:
- Load " Books.xml " pod xmldoc
- Uzyskaj pierwszy <book> elementu
- Wyjście nazwa węzła węzła nadrzędnego "x"
Unikać puste węzły tekstowe
Firefox i inne przeglądarki, będą traktować pustych biało-spacji ani nowe linie jako węzły tekstowe, Internet Explorer nie będzie.
To powoduje problemy podczas korzystania z właściwości: firstChild, lastChild, nextSibling, previousSibling.
Aby uniknąć przechodząc do pustych węzłów tekstowych (spacje i znaki nowej linii między węzłami element), możemy użyć funkcji, która sprawdza typ węzła:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
Powyższa funkcja pozwala używać get_nextSibling( node ) zamiast właściwość node .nextSibling.
Kod wyjaśnił:
Element węzły są typu 1. Jeśli węzeł rodzeństwo nie jest wierzchołkiem elementu, to przenosi się do kolejnych węzłów, dopóki węzeł element jest znaleziony. W ten sposób, wynik będzie taki sam zarówno w programie Internet Explorer i Firefox.
Zdobądź pierwsze dziecko Element
Poniższy kod wyświetla pierwszy element węzła pierwszego <book> :
Przykład
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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>
Wydajność:
title
Spróbuj sam " Przykład wyjaśnił:
- Load " Books.xml " pod xmldoc
- Użyj funkcji get_firstChild na pierwszym <book> węzeł elementu zdobyć pierwszy węzeł podrzędny, który jest węzłem elementem
- Wyjście nazwa węzła pierwszego węzła potomnego, który jest węzłem elementem
Więcej przykładów
lastChild()
Ten przykład używa lastChild() metodę i funkcję niestandardową, aby uzyskać ostatniego węzła potomnego węzła
nextSibling()
Ten przykład używa nextSibling() metodę i funkcję niestandardową, aby uzyskać następny węzeł rodzeństwo węzła
previousSibling()
Ten przykład używa previousSibling() metodę i funkcję niestandardową, aby uzyskać poprzedni węzeł rodzeństwo węzła