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() Methode

unter Verwendung von parentNode, firstChild und lastChild eines Elementknotens Eigenschaften

getElementById() und getElementsByTagName()

getElementById() und getElementsByTagName() sind zwei Methoden, die beliebiges HTML im gesamten HTML-Dokument finden können Element.

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

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

Auf welcher Ebene im Dokument 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() gibt ein Element mit einer angegebenen ID zurück:

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 im XML enthalten sein muss In der DTD deklariert.

getElementsByTagName() Die Methode gibt alle Elemente (als Liste von Knoten) zurück, die Nachkommen des Elements sind, in dem Sie sich befinden, 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, und diese

-Elemente müssen die ID „maindiv“ haben. Nachkommen von Elementen:

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

Knotenliste (nodeList)

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

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

Die Variable x enthält nun eine Liste aller

-Elemente auf der Seite, 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 seine Indexnummer auf ein bestimmtes Element zugreifen.

Um auf das dritte

-Element zuzugreifen, können Sie schreiben:

var y=x[2];

parentNode, firstChild und lastChild

Die drei Attribute parentNode, firstChild und lastChild können folgen die Struktur des Dokuments und legen „kurze Wege“ innerhalb des Dokuments zurück.

Bitte schauen Sie sich das folgende HTML-Fragment an:

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

Im obigen HTML-Code ist das erste das erste untergeordnete Element (firstChild) des , Und das letzte Ist das letzte untergeordnete Element (lastChild) des -Elements.

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