Detaillierte Erläuterung der JS-Zugriffsmethode für den DOM-Knoten

Das Beispiel in diesem Artikel beschreibt die JS-Methode für den Zugriff auf DOM-Knoten. Geben Sie es wie folgt als Referenz für alle frei:

Knoten suchen und darauf zugreifen

Sie können das Element, das Sie bedienen möchten, auf verschiedene Weise finden:

Mit getElementById( ) und getElementsByTagName()-Methoden

unter Verwendung der Eigenschaften parentNode, firstChild und lastChild eines Elementknotens

getElementById() und getElementsByTagName()

getElementById() und getElementsByTagName( ) Diese beiden Methoden können jedes HTML-Element im gesamten HTML-Dokument finden.

Diese beiden Methoden ignorieren die Struktur des Dokuments. Wenn Sie alle

-Elemente im Dokument finden möchten, findet getElementsByTagName() sie alle, unabhängig davon, wo sich das

-Element befindet. Außerdem gibt die Methode getElementById() das richtige Element zurück, unabhängig davon, wo es in der Dokumentstruktur versteckt ist.

Mit diesen beiden Methoden erhalten Sie alle benötigten HTML-Elemente, unabhängig davon, wo sie sich im Dokument befinden!

getElementById() kann Elemente mit der angegebenen ID zurückgeben:

getElementById() Syntax

document.getElementById("ID");

Kommentare: getElementById() funktioniert nicht in XML. In einem XML-Dokument müssen Sie nach einem Attribut vom Typ „id“ suchen, das in der XML-DTD deklariert werden muss.

Die Methode getElementsByTagName() gibt alle Elemente (als Liste von Knoten) zurück, die Nachkommen des Elements sind, das Sie verwenden, wenn Sie diese Methode verwenden, und zwar unter Verwendung des angegebenen Tag-Namens.

getElementsByTagName() kann für jedes HTML-Element verwendet werden:

getElementsByTagName() Syntax

document.getElementsByTagName("标签名称");

oder:

document.getElementById('ID').getElementsByTagName("标签名称");

Beispiel 1

Das folgende Beispiel gibt eine Knotenliste aller

-Elemente im Dokument zurück:

document.getElementsByTagName("p");

Beispiel 2

Das folgende Beispiel gibt eine Knotenliste aller

-Elemente zurück Muss ein Nachkomme des Elements mit der ID „maindiv“ sein:

document.getElementById('maindiv').getElementsByTagName("p");

Knotenliste (nodeList)

Wenn wir eine Knotenliste verwenden , normalerweise wird diese Liste in einer Variablen gespeichert, etwa so:

var x=document.getElementsByTagName("p");

Die Variable x enthält nun alle

und wir können auf diese

-Elemente über ihre Indexnummern zugreifen.

Hinweis: Indexnummern beginnen bei 0.

Sie können die Knotenliste mithilfe des Längenattributs durchlaufen:

var x=document.getElementsByTagName("p");
for (var i=0;i
Nach dem Login kopieren

Sie können auch über die Indexnummer auf einen bestimmten Knoten zugreifen Elemente.

Um auf das dritte

-Element zuzugreifen, können Sie Folgendes schreiben:

var y=x[2];

parentNode, firstChild und lastChild

Diese drei Attribute parentNode, firstChild und lastChild können der Struktur des Dokuments folgen und im Dokument eine „Kurzstreckenfahrt“ durchführen.

Bitte schauen Sie sich den folgenden HTML-Ausschnitt an:

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

Im obigen HTML-Code ist das erste tr> ist das erste untergeordnete Element (firstChild) des Elements und das letzte ist das letzte untergeordnete Element (lastChild) des

Außerdem ist der übergeordnete Knoten (parentNode) jedes