Lokalizacja węzłów DOM XML
- Poprzednia strona Przechodzenie przez węzły DOM
- Następna strona Pobieranie węzłów DOM
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:

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; }
Wyjaśnienie przykładu:
- Przykład: books.xml załadowany do
xmlDoc
w - Pobierz pierwszy element <book>
- 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>
Wyjaśnienie przykładu:
- Przykład: books.xml Załaduj do xmlDoc
- Użyj funkcji get_firstChild na pierwszym węźle <book>, aby uzyskać pierwszy podznode.
- 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.
- Poprzednia strona Przechodzenie przez węzły DOM
- Następna strona Pobieranie węzłów DOM