Detaillierte Erläuterung von Methodenbeispielen für Javascript zum Suchen und Zugreifen auf Dom-Knoten

Sie können das Element, das Sie bearbeiten möchten, auf verschiedene Arten finden:

Mit den Methoden getElementById() und getElementsByTagName()

Durch Verwendung der Eigenschaften parentNode, firstChild und lastChild eines Elementknotens

getElementById() und getElementsByTagName()

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

Diese beiden Methoden ignorieren die Struktur des Dokuments. Wenn Sie alle e388a4556c0f65e1904146cc1a846bee-Elemente im Dokument finden möchten, findet getElementsByTagName() sie alle, unabhängig davon, wo sich das e388a4556c0f65e1904146cc1a846bee-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");

Hinweis: 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, 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 alle Elemente in der zurück document e388a4556c0f65e1904146cc1a846bee Eine Knotenliste von Elementen:

document.getElementsByTagName("p");

Beispiel 2

Das folgende Beispiel gibt alle91b096586ae63cd5b497c6a1da56780c-Elementen, und diese e388a4556c0f65e1904146cc1a846bee-Elemente müssen Nachkommen des Elements mit der ID „mainp“ sein:

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

Knotenliste (nodeList)

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

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

Die Variable x enthält nun eine Liste aller e388a4556c0f65e1904146cc1a846bee-Elemente auf der Seite, und wir können auf diese e388a4556c0f65e1904146cc1a846bee-Elemente 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
Sie können auch über seinen Index auf ein bestimmtes Objekt zugreifen Zahlenelemente. 
Um auf das dritte e388a4556c0f65e1904146cc1a846bee-Element zuzugreifen, würden Sie schreiben: 

var y=x[2];
parentNode, firstChild und lastChild
Die drei Attribute parentNode, firstChild und lastChild können der Struktur des Dokuments folgen und eine „Kurzstreckenfahrt“ im Dokument durchführen. 
Sehen 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 a34de1251f0d9fe1e645927f19a896e8 untergeordnetes Element (firstChild) des Elements und das letzte b6c5a531a458a2e790c1fd6421739d1c ist das letzte untergeordnete Element (lastChild) des a34de1251f0d9fe1e645927f19a896e8 
Außerdem ist a34de1251f0d9fe1e645927f19a896e8 der übergeordnete Knoten (parentNode) jedes b6c5a531a458a2e790c1fd6421739d1c 
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Methodenbeispielen für Javascript zum Suchen und Zugreifen auf Dom-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!