XML DOM - Navigační uzly
Uzly lze procházet pomocí vztahů uzlů.
Navigace v uzlech DOM
Přístup k uzlům ve stromu uzlů prostřednictvím vztahu mezi uzly se často nazývá „navigační uzly“.
V XML DOM jsou vztahy uzlů definovány jako vlastnosti uzlů:
- parentNode
- childNodes
- první dítě
- poslední dítě
- dalšíSourozenec
- předchozíSourozenec
Následující obrázek ilustruje část stromu uzlů a vztah mezi uzly v books.xml :
DOM - Parent Node
Všechny uzly mají právě jeden nadřazený uzel. Následující kód přejde do nadřazeného uzlu <book>:
Příklad
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Vysvětlený příklad:
- Načtěte " books.xml " do xmlDoc
- Získejte první prvek <book>
- Zadejte název uzlu nadřazeného uzlu "x"
Vyhněte se prázdným textovým uzlům
Firefox a některé další prohlížeče budou zacházet s prázdnými mezerami nebo novými řádky jako s textovými uzly, Internet Explorer nikoli.
To způsobuje problém při použití vlastností: firstChild, lastChild, nextSibling, previousSibling.
Abychom se vyhnuli navigaci na prázdné textové uzly (mezery a znaky nového řádku mezi uzly prvků), používáme funkci, která kontroluje typ uzlu:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
Výše uvedená funkce vám umožňuje použít get_nextSibling( node ) místo vlastnosti node .nextSibling.
Vysvětlení kódu:
Uzly prvku jsou typu 1. Pokud sourozenecký uzel není uzel prvku, přesune se k dalším uzlům, dokud se uzel prvku nenajde. Tímto způsobem bude výsledek stejný v Internet Exploreru i Firefoxu.
Získejte první dětský prvek
Následující kód zobrazuje uzel prvního prvku první <knihy>:
Příklad
<!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>
Výstup:
title
Vysvětlený příklad:
- Načtěte " books.xml " do xmlDoc
- Pomocí funkce get_firstChild na prvním uzlu prvku <book> získáte první podřízený uzel, který je uzlem prvku
- Zadejte název uzlu prvního podřízeného uzlu, který je uzlem prvku
Další příklady
Tento příklad používá metodu lastChild() a vlastní funkci k získání posledního podřízeného uzlu uzlu.
Tento příklad používá metodu nextSibling() a vlastní funkci k získání dalšího sourozeneckého uzlu uzlu.
Tento příklad používá metodu previousSibling() a vlastní funkci k získání předchozího sourozeneckého uzlu uzlu.