HTML-DOM-Navigation
Durch die HTML-DOM, können Sie den Knoten in der Knotennavigationsstruktur Beziehung zu verwenden.
HTML-DOM-Knotenliste
getElementsByTagName () Methode liefert eine Liste von Knoten. Knotenliste ist ein Knoten-Array.
Der folgende Code ausgewählte Dokument alle <p> Knoten:
Beispiele
Es kann durch die nächste Etikett zugänglich. Um den zweiten Zugang <p>, können Sie schreiben:
Versuchen »
Hinweis:
Unter dem Label beginnt bei 0.
HTML-DOM Node List Länge
Länge Attribut definiert die Anzahl der Knoten in der Knotenliste.
Sie können die Länge Eigenschaft Schleifenknotenliste verwenden:
Beispiele
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Versuchen »
Analyse Beispiele:
- Holen Sie sich alle <p> Elementknoten
- Der Ausgangswert jedes Element <p> des Textknotens
Navigationsknoten Beziehung
parentNode, firstchild und lastchild, navigieren Sie durch die Dokumentstruktur: Sie können drei Knoten Attribute verwenden.
Betrachten Sie das folgende HTML-Fragment:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- Das erste Element <p> ist das erste Kind des <body> Element (first)
- <Div> Element ist das letzte Kind-Element <body> Element (lastchild)
- <Body> Element ist das erste Element <p> und ein <div> Element des übergeordneten Knoten (parentNode)
firstchild Eigenschaft kann verwendet werden, um Elemente des Textes zuzugreifen:
Beispiele
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Versuchen »
DOM Wurzelknoten
Es gibt zwei spezielle Attribute, Sie die gesamte Dokumentation zugreifen:
- document.documentElement - alle Dokumente
- document.body - Körper des Dokuments
Beispiele
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Versuchen »
childnodes und nodeValue
Neben innerHTML- Eigenschaft können Sie auch die childnodes und nodeValue Eigenschaft verwenden, um den Inhalt des Elements zu erhalten.
Der folgende Code wird das id = "intro" die <p> Elementwerte:
Beispiele
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Versuchen »
In dem obigen Beispiel ist getElementById Verfahren, während childnodes und nodeValue Eigenschaften sind.
In diesem Tutorial werden wir die Innerhtml-Eigenschaft verwenden. Allerdings hilft die oben Lernmethode die DOM-Baumstruktur und das Verständnis zu navigieren.