Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung von Methodenbeispielen für Javascript zum Suchen und Zugreifen auf Dom-Knoten

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

伊谢尔伦
Freigeben: 2017-07-20 11:42:21
Original
1309 Leute haben es durchsucht

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

-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");
Nach dem Login kopieren

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("标签名称");
Nach dem Login kopieren

oder:


document.getElementById('ID').getElementsByTagName("标签名称");
Nach dem Login kopieren

Beispiel 1

Das folgende Beispiel gibt alle Elemente in der zurück document

Eine Knotenliste von Elementen:


document.getElementsByTagName("p");
Nach dem Login kopieren

Beispiel 2

Das folgende Beispiel gibt alle< Eine Knotenliste von p>-Elementen, und diese

-Elemente müssen Nachkommen des Elements mit der ID „mainp“ sein:


document.getElementById(&#39;mainp&#39;).getElementsByTagName("p");
Nach dem Login kopieren

Knotenliste (nodeList)

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


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

Die Variable x enthält nun eine Liste aller

-Elemente auf der Seite, und wir können auf diese

-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
Nach dem Login kopieren

Sie können auch über seinen Index auf ein bestimmtes Objekt zugreifen Zahlenelemente.

Um auf das dritte

-Element zuzugreifen, würden Sie schreiben:


var y=x[2];
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage