JavaScript wird verwendet, um einer statischen HTML -Seite Interaktivität zu verleihen. Um Interaktivität hinzuzufügen, muss es jedoch auf die im DOM vorhandenen HTML -Elemente zugreifen. JavaScript bietet eine Reihe von Methoden, um auf die in DOM vorhandenen HTML -Elemente zuzugreifen. Hier werden wir die meisten von ihnen ausführlich besprechen:

So greifen Sie mit JavaScript mit seiner ID auf ein DOM -Element zu

Eine der häufigsten Methoden, um auf ein Element in HTML DOM zuzugreifen, ist GetElementById () Dies greift auf ein Element zu, das auf dem Wert seines ID -Attributs basiert. Der Wert der ID -Attribute soll eindeutig sein und keine zwei Elemente auf einer einzelnen HTML -Seite sollten ähnliche IDs haben. Auch wenn es mehrere Elemente gibt, die die gleiche ID haben, die GetElementById () Die Methode gibt nur ein Element zurück (das erste Element mit dieser ID in der HTML -Datei).

Jetzt werden wir uns ein Beispiel ansehen, um besser zu verstehen, wie die GetElementById () Methode funktioniert.

Notiz: Die Browserkonsole wird zur Demonstration von Beispielen in diesem Artikel verwendet.

Die folgende HTML -Datei wird für dieses Beispiel verwendet. Das JavaScript wird innerhalb der hinzugefügt Tags, die speziell zum Einbetten von JavaScript -Code direkt in eine HTML -Datei verwendet werden.

So erhalten Sie Elemente in JavaScript aus dem DOM?

So greifen Sie durch seine ID auf ein DOM -Element zu?

GetElementById ()

In der obigen HTML -Datei haben wir einen Absatz mit einer eindeutigen ID i.e. Beispiel-id. Wenn wir auf dieses Absatzelement zugreifen möchten, können wir die verwenden GetElementById () Methode:

Wir können jetzt die neu erstellte Absatzvariable verwenden, um die zu manipulieren Beispiel-id Element direkt aus JavaScript e.G Wenn wir den Hintergrund und die Textfarbe des Absatzes ändern möchten, dann:

So greifen Sie nach DOM -Elementen nach ihrer Klasse zu

Der GetElements byclassName () Die Methode kann verwendet werden, um mehrere Elemente zu erhalten, die denselben Klassenattributwert haben. Um zu zeigen, wie die GetElements byclassName () Methode funktioniert. Wir werden unsere HTML -Datei folgendermaßen ändern:

So erhalten Sie Elemente in JavaScript aus dem DOM?

So greifen Sie nach DOM -Elementen nach ihrer Klasse zu?

GetElements byclassName ()

Der GetElements byclassName () Die Methode gibt alle Elemente zurück, die eine bestimmte Klasse in Form eines Arrays haben. Wenn wir also nur eines der im zurückgegebenen Array vorhandenen Elemente ändern möchten, müssen wir mit seiner Indexnummer darauf zugreifen:

Wir können eine für Schleife verwenden, wenn wir dieselben Änderungen auf alle Elemente des Arrays anwenden möchten:

So greifen Sie nach ihrem Tag DOM -Elemente zu

JavaScript liefert auch die GetElementsByTagName () Methode, mit der auf alle Elemente zugreifen kann, die das gleiche HTML -Tag haben:

So erhalten Sie Elemente in JavaScript aus dem DOM?

• GetElementById () -Methode


• GetElementsByClassName () -Methode


• GetElementsByName () -Methode


• GetElementsByTagName () -Methode


• QuerySelector () -Methode


• QuerySelectorAll () -Methode

Wir können erneut eine Schleife verwenden, um die gleichen Änderungen auf alle im Neuarray vorhandenen Elemente anzuwenden:

So greifen Sie auf DOM -Elemente zu, indem Sie die Methoden der Abfrage -Selektoren verwenden

JavaScript hat auch das QuerySelector () und das QuerySelectorAll () Methoden, die zum Zugriff auf HTML -DOM -Elemente verwendet werden können. Um auf ein einzelnes Element zuzugreifen, können wir das verwenden QuerySelector () Methode; Wenn es mehrere Elemente mit derselben ID oder Klasse gibt, dann die QuerySelector () Die Methode gibt das erste Element zurück:

So erhalten Sie Elemente in JavaScript aus dem DOM?

GetElementById () -Methode

GetElementsByClassName () -Methode

GetElementsByName () -Methode

GetElementsByTagName () -Methode

QuerySelector () -Methode

QuerySelectorAll () -Methode

Der # Zeichen ist der Selektor für das ID -Attribut, während die . Zeichen ist der Selektor für das Klassenattribut.

Der QuerySelectorAll () Die Methode gibt ein Array zurück, das alle DOM -Elemente mit einem bestimmten Klassennamen oder einer ID enthält:

So erhalten Sie Elemente in JavaScript aus dem DOM?

GetElementById () -Methode

GetElementsByClassName () -Methode

GetElementsByName () -Methode

GetElementsByTagName () -Methode

QuerySelector () -Methode

QuerySelectorAll () -Methode

Wir können verschiedene Methoden wie ausführen, z .für jede() Methode auf den Arrays, die von der zurückgegeben wurden QuerySelectorAll (). Diese Methoden funktionieren nicht mit den Arrays, die von zurückgegeben werden Getelement Methoden.

Abschluss

Der Zugriff auf HTML-DOM-Elemente und die interaktive Durchführung durch JavaScript ist der grundlegendste und dennoch wichtigste Teil der Arbeit von Front-End-Develoeprs. Hier haben wir die fünf am häufigsten verwendeten Methoden in JavaScript zum Zugriff auf DOM -Elemente aufgeführt.