HTML -Elemente können mit den JavaScript -Methoden zugegriffen werden. Die JavaScript-Methoden zugreifen auf die HTML-Elemente von DOM (logische baumartige Struktur der Webdokumente). JavaScript unterstützt fünf Methoden, die Namen, ID, Klassenname, Tagname oder CSS -Selektor verwenden, um auf die Objekte zuzugreifen. Durch den Zugriff auf HTML -Elemente mit JavaScript können Sie HTML -Elemente manipulieren. Dieser Artikel bietet einen Nachweis möglicher Möglichkeiten zum Zugriff auf HTML -Elemente mithilfe von JavaScript -Methoden.

Mithilfe von JavaScript -Methoden Zugriff auf HTML -Elemente

Die fünf JavaScript -Methoden unterstützen den Zugriff auf die HTML -Elemente. Diese Methoden werden nachstehend beschrieben.

So greifen Sie durch ID auf HTML -Elemente zu

Das ID -Attribut identifiziert eindeutig das HTML -Element, und die folgende JavaScript -Methode würde dazu beitragen.

Die ID bezieht sich auf das HTML -Element und wird von JavaScript verwendet, um auf dieses HTML -Element zuzugreifen. Das Objekt (in DOM), das der ID entspricht.

Beispiel:

Der nachstehende Code übt die aus GetElementById () Methode von JavaScript.

Der obige Code greift auf das Element zu, das ID = un1 hat, und dann wird der Wert dieses Elements auf „Hallo Welt“ manipuliert!”.

Ausgang

Aus der Ausgabe wird beobachtet, dass der ursprüngliche Inhalt von

wurde in „Hello World verändert!”.

So greifen Sie mit Namen auf HTML -Elemente zu

Das Namensattribut der Elemente kann auch von JavaScript verwendet werden, um auf HTML -Elemente zuzugreifen. Ein einzelner Name kann jedoch mehreren HTML -Elementen zugeordnet werden. Der bereitgestellte Code verwendet die GetElementsByName () Methode.

Zwei Absätze haben die gleichen Namen; Somit müssen wir die Indexnummer jedes Absatzes definieren (zum Zeitpunkt der Verwendung der Methode). Die Indexnummer des ersten Absatzes wird als [0] und den zweiten Absatz als [1] bezeichnet.

Ausgang

Aus der Ausgabe wird beobachtet, dass der Inhalt des Absatzes (bei Index [1]) geändert wurde.

So greifen Sie von Tagname auf HTML -Elemente zu

Die JavaScript -Methode GetElementsByTagName () wird hier verwendet, um auf die Elemente nach ihren Tagnamen zuzugreifen.

Der obige Code greift auf den Absatz (bei Index [0]) zu und ändert seinen Wert in „Der Absatz wird zugegriffen“.

Notiz: Ein HTML -Dokument umfasst verschiedene Tags und wenn Sie auf sie zugreifen, indem Sie JavaScript verwenden GetElementsByTagName () Methode, Sie müssen die Indexnummer des Elements erwähnen.

Ausgang

Die Ausgabe zeigt, dass der Inhalt des Absatzes am Index 0 geändert wurde.

So greifen Sie nach Klassenname auf HTML -Elemente zu

Der GetElements byclassName () Die Methode von JavaScript wird hier verwendet, um auf die HTML -Elemente zuzugreifen.

Der obige Code greift auf die benannte Klasse zu “zwei”Und ändert seinen Inhalt. Ein Dokument kann mehrere Klassen der gleichen Namen enthalten; Somit ist eine Indexnummer in diesem Fall auch obligatorisch.

Ausgang

Die Ausgabe zeigt, dass der Inhalt des Klassennamens (benannt zwei) wurde geändert.

So greifen Sie durch QuerySelector auf HTML -Elemente zu

Ein HTML -Element kann Klassen und IDs haben, die zum Ändern der Stile der Elemente verwendet werden können. Der QuerySelector () Mit JavaScript können Sie die Elemente abrufen, die dem spezifischen CSS -Selektor entsprechen. Der QuerySelector wird weiter in zwei Methoden unterteilt;

• Der QuerySelector () Die Methode gibt das erste Element zurück (das dem Ausdruck entspricht)
• Der QuerySelectorAll () Die Methode gibt alle passenden Elemente zurück

Notiz: Um auf die Klasse zuzugreifen, müssen Sie den Punkt einstellen (.) Vor dem Unterrichtsnamen und für die ID müssen Sie das (#) Zeichen vor dem ID -Namen verwenden.

Beispiel 1: Verwenden der Methode querySelector ()

Der unten geschriebene Code verwendet die QuerySelector () Methode, um das erste Element zu erhalten, das dem Zustand entspricht.

Im obigen Code die QuerySelector () Die Methode wird auf die Elemente angewendet, die mit class = "lh".

Ausgang

Die Ausgabe zeigt, dass auf den ersten Absatz (der mit dem Klassennamen und der ID übereinstimmt) zugegriffen wurde und der Inhalt aktualisiert wird.

Beispiel 2: Verwenden der Methode querySelectorAll ()

Wie zuvor erläutert die QuerySelector () Methode greift nur auf die erste Übereinstimmung zu. Du kannst den ... benutzen QuerySelectorAll () Methode, um auf das Element Ihrer Wahl zuzugreifen, wie wir es im folgenden Beispiel getan haben.

Der obige Code praktiziert die QuerySelectorAll () Methode zum Zugriff auf die Elemente mit id = “un“. Die Indexnummer ist obligatorisch und wir haben hier [1] verwendet.

Ausgang

Es wird aus der Ausgabe geschlossen, dass die CSS -Selektoren wie Klassen und ID von der verwendet wurden QuerySelectorAll () Methode zum Zugriff auf den Inhalt des Absatzes unter Index 1 zu/ändern.

Abschluss

Das JavaScript kann auf HTML -Elemente zugreifen, indem sie die verwenden Name, ID, Klassenname, Tagname und QuerySelector der HTML -Elemente. Diese Methoden können auch verwendet werden, um den Inhalt eines HTML -Elements zu manipulieren. Dieser Artikel zeigt die fünf JavaScript -Methoden, die auf verschiedene Weise auf die HTML -Elemente zugreifen. Der ID, Klassenname und Tagname Methoden neigen dazu, direkt auf die HTML -Elemente zuzugreifen. Allerdings die querySelector ()/querySelectorAll () Die Methode verwendet CSS -Selektoren, um auf die HTML -Elemente zuzugreifen und sie zu ändern.