Der DOM“ TokenListe „enthält viele Eigenschaften oder Methoden, auf die der Endbenutzer entsprechend seinen Anforderungen zugreifen kann. Die in dieser Liste bereitgestellten Eigenschaften und Methoden führen spezifische Operationen an den bereitgestellten Datensätzen durch und geben das Ergebnis entsprechend zurück. Es ähnelt eher einem Array, da es verschiedene Mitglieder hat, die anhand ihres Index ausgewählt werden können, und genau wie bei einem Array lautet der erste Index „ 0 “. Sie können jedoch keine Methoden wie „ pop()“, „push()“ oder „join()“ “.
In diesem Blog wird die Funktionsweise von HTML-DOMTokenList-Objekten mit JavaScript erläutert.
Wie arbeite ich mit JavaScript-HTML-DOMTokenList-Objekten?
Die HTML-DOMTokenList ist nichts für sich und ihr Wert ergibt sich nur aus den darin enthaltenen Eigenschaften und Methoden. Schauen wir uns diese Eigenschaften und Methoden im Detail sowie die richtige Implementierung an.
Methode 1: Add()-Methode
Der ' Hinzufügen ()“ fügt dem ausgewählten Element neue Klassen, Eigenschaften oder einfache Token hinzu oder weist diese zu. Seine Syntax ist unten angegeben:
htmlElement. hinzufügen ( oneOrMoreToken )
Die Implementierung erfolgt über den folgenden Code:
< Kopf >
< Stil >
.Schriftgröße{
Schriftgröße: groß;
}
.Farbe{
Hintergrundfarbe: Kadettenblau;
Farbe: Weißrauch;
}
< / Stil >
< / Kopf >
< Körper >
< h1 Stil = „Farbe: Kadettenblau;“ > Linux < / h1 >
< Taste onclick = 'Aktion()' > Addierer < / Taste >
< P > Drücken Sie die obige Schaltfläche, um das Styling anzuwenden < / P >
< div Ausweis = 'ausgewählt' >
< P > Ich bin ausgewählter Text. < / P >
< / div >
< Skript >
Funktion action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / Skript >
< / Körper >
Die Erklärung des obigen Codes lautet wie folgt:
- Wählen Sie zunächst zwei CSS-Klassen aus „ Schriftgröße ” und „Farbe“ und weisen Sie ihnen zufällige CSS-Eigenschaften wie „ „font-size“, „background-color“ und „color “.
- Als nächstes erstellen Sie Schaltflächen mit dem Befehl „< Taste >“-Tag, das das „ Aktion ()“-Funktion mit der Funktion „ onclick „Ereignis-Listener.
- Erstellen Sie außerdem ein übergeordnetes „ div ”-Element und weisen Sie ihm die ID „ zu ausgewählt ” und fügen Sie darin Dummy-Daten ein.
- Definieren Sie anschließend „ Aktion ()“-Funktion und speichern Sie die Referenz des ausgewählten Elements, indem Sie auf seine eindeutige ID zugreifen.
- Verwenden Sie abschließend das „ Klassenliste ”-Eigenschaft, um die Klassen zuzuweisen und die „ hinzufügen ()' Methode. Übergeben Sie dann die CSS-Klassen in dieser Methodenklammer und sie werden diese Klassen auf das ausgewählte Element anwenden.
Die Ausgabe nach der Kompilierung des obigen Codes wird wie folgt generiert:
Das obige GIF bestätigt, dass die CSS-Klassen einem ausgewählten Element über „ hinzufügen ()' Methode.
Methode 2: Remove()-Methode
Diese Methode entfernt die spezifische Klasse oder ID aus einem oder mehreren ausgewählten Elementen, wie im folgenden Code beschrieben:
< Kopf >< Stil >
.Schriftgröße {
Schriftart- Größe : groß;
}
. Farbe {
Hintergrund- Farbe : Kadettenblau;
Farbe : weißer Rauch;
}
< / Stil >
< / Kopf >
< Körper >
< h1 Stil = „Farbe: Kadettenblau;“ > Linuxhint < / h1 >
< Taste onclick = 'Aktion()' >Addierer< / Taste >
< P >Drücken Sie die obige Schaltfläche, um das Styling anzuwenden< / P >
< div Ausweis = 'ausgewählt' Klasse = „FontSize-Farbe“ >
< P >Das bin ich Ausgewählt Text .< / P >
< / div >
< Skript >
Funktion Aktion ( ) {
document.getElementById ( 'ausgewählt' ) .classList.remove ( 'Farbe' ) ;
}
< / Skript >
< / Körper >
Die Beschreibung des obigen Codes lautet wie folgt:
- Als Beispiel dient hier zunächst der im obigen Code erläuterte Code.
- Hier sind sowohl die „ Farbe ' Und ' Schriftgröße „Klassen werden direkt dem ausgewählten Element zugewiesen.
- Danach, innerhalb der „ Aktion ()“-Funktion, die von der „ onclick „Ereignis-Listener“ entfernen ()“ wird die Token-Methode verwendet.
- Diese Methode benötigt eine oder mehrere Klassen, die aus dem ausgewählten Element entfernt werden. In unserem Fall ist das „ Farbe Die Klasse „“ wird aus dem ausgewählten HTML-Element entfernt.
Die Ausgabe für den obigen Code wird wie folgt angezeigt:
Die obige Ausgabe zeigt, dass die spezifische CSS-Klasse mithilfe der Methode „remove()“ aus dem ausgewählten Element entfernt wurde.
Methode 3: Toggle()-Methode
Der ' Umschalten ()“-Methode ist die Kombination aus beiden „ hinzufügen ()' Und ' entfernen ()“-Methoden. Es weist zunächst die bereitgestellte CSS-Klasse dem ausgewählten HTML-Element zu und entfernt sie dann entsprechend den Aktionen des Benutzers.
< html >< Kopf >
< Stil >
.Schriftgröße {
Schriftart- Größe : xx-groß;
}
. Farbe {
Hintergrund- Farbe : Kadettenblau;
Farbe : weißer Rauch;
}
< / Stil >
< / Kopf >
< Körper >
< h1 Stil = „Farbe: Kadettenblau;“ > Linuxhint < / h1 >
< Taste onclick = 'Aktion()' >Addierer< / Taste >
< P >Drücken Sie die obige Schaltfläche, um das Styling anzuwenden< / P >
< div Ausweis = 'ausgewählt' >
< P >Das bin ich Ausgewählt Text .< / P >
< / div >
< Skript >
Funktion Aktion ( ) {
document.getElementById ( 'ausgewählt' ) .classList.toggle ( 'Schriftgröße' ) ;
}
< / Skript >
< / Körper >
< / html >
Nachfolgend finden Sie eine Beschreibung des obigen Codes:
- Es wird das gleiche Programm wie im obigen Abschnitt verwendet, nur „ Umschalten ()“-Methode wird durch die „ entfernen ()' Methode.
Am Ende der Kompilierungsphase sieht die Ausgabe wie folgt aus:
Die Ausgabe zeigt, dass die spezifische CSS-Klasse entsprechend der Aktion des Benutzers hinzugefügt und entfernt wird.
Methode 4: Contains()-Methode
Der ' enthält ()“-Methode wird verwendet, um die Verfügbarkeit bestimmter CSS-Klassen über dem HTML-Element zu überprüfen. Ihre Implementierung ist unten angegeben:
< Skript >Funktion Aktion ( ) {
sei x = dokumentieren. getElementById ( 'ausgewählt' ) . Klassenliste . enthält ( 'Schriftgröße' ) ;
dokumentieren. getElementById ( 'prüfen' ) . innerHTML = X ;
}
Skript >
Der HTML- und CSS-Teil bleibt gleich. Nur im „< Skript >“-Tag wird die Methode „contains()“ auf das ausgewählte Element angewendet, um zu prüfen, ob das „ Schriftgröße ” auf dieses Element angewendet wird oder nicht. Anschließend wird das Ergebnis auf der Webseite in einem HTML-Element mit der ID „ prüfen “.
Nach der Kompilierung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe zeigt, dass der Wert von „ WAHR „wird zurückgegeben, was bedeutet, dass die spezifische CSS-Klasse auf das ausgewählte HTML-Element angewendet wird.
Methode 5: Item()-Methode
Der ' Artikel ()“-Methode wählt das Token oder die CSS-Klasse entsprechend ihrer Indexnummer aus, beginnend mit „ 0 ', Wie nachfolgend dargestellt:
< Körper >< h1-Stil = „Farbe: Kadettenblau;“ > Linux h1 >
< Schaltfläche onclick = 'Aktion()' > Checker Taste >
< P > Das CSS Klasse welches zunächst vergeben wird , wird abgerufen : P >
< h3-ID = 'Anwendungsfall' Klasse = „ersteCls zweiteCls dritteCls“ > h3 >
< Skript >
Funktion Aktion ( ) {
lass demoList = dokumentieren. getElementById ( 'Anwendungsfall' ) . Klassenliste . Artikel ( 0 ) ;
dokumentieren. getElementById ( 'Anwendungsfall' ) . innerHTML = Demoliste ;
}
Skript >
Körper >
Erklärung des obigen Codes:
- Zunächst werden unserem ausgewählten Element mehrere CSS-Klassen mit der ID „ zugewiesen. Anwendungsfall ” und die Methode „action()“, die über die Methode „ aufgerufen wird onclick ' Ereignis.
- In dieser Funktion ist das „ Artikel ()“-Methode mit einem Index von „ 0 „wird an das ausgewählte Element angehängt. Das Ergebnis wird in der Variablen „ Demoliste “, das dann mithilfe der Funktion „ über die Webseite gedruckt wird innerHTML ' Eigentum.
Nach Abschluss der Kompilierung sieht die Ausgabe so aus:
Die Ausgabe zeigt den Namen der CSS-Klasse, die zunächst auf das ausgewählte Element angewendet und abgerufen wird.
Methode 6: Längeneigenschaft
Der ' Länge Die Eigenschaft „tokenList“ gibt die Anzahl der Elemente oder zugewiesenen Klassen zurück, die auf das ausgewählte Element angewendet werden. Der Implementierungsprozess ist unten aufgeführt:
< Skript >Funktion Aktion ( ) {
Lass sie abreißen = dokumentieren. getElementById ( 'Anwendungsfall' ) . Klassenliste . Länge ;
dokumentieren. getElementById ( 'Anwendungsfall' ) . innerHTML = zerstören ;
}
Skript >
Im obigen Codeblock:
- Zuerst die ' Länge „Die Immobilie ist mit der „ verbunden. Klassenliste ”-Eigenschaft, um die Anzahl der Klassen abzurufen, die dem ausgewählten Element zugewiesen sind.
- Als nächstes wird das Ergebnis der Eigenschaft in der Variablen „ zerstören “, das über der Webseite auf einem Element mit der ID „ angezeigt wird Anwendungsfall “.
- Der Rest des Codes bleibt derselbe wie im obigen Abschnitt.
Die generierte Ausgabe nach der Kompilierung ist unten aufgeführt:
Die Ausgabe gibt die über das Element angewendeten Klassen zurück.
Methode 7: Methode „Replace()“.
Der ' ersetzen ()“ ist eine Methode, die mindestens zwei Parameter annimmt und den ersten Parameter durch den zweiten Parameter für das ausgewählte Element ersetzt, wie unten gezeigt:
< Skript >Funktion Aktion ( ) {
lass demoList = dokumentieren. getElementById ( 'Anwendungsfall' ) . Klassenliste . ersetzen ( 'Schriftgröße' , 'Farbe' ) ;
}
Skript >
Hier ist das CSS „ Schriftgröße „Klasse wird durch CSS ersetzt“ Farbe „Klasse für ein Element mit der ID „ Anwendungsfall “. Der restliche HTML- und CSS-Code bleibt derselbe wie in den obigen Abschnitten.
Nach der Änderung des „ Skript ”-Teil und Kompilieren der Haupt-HTML-Datei sieht die Ausgabe so aus:
Die Ausgabe zeigt, dass die spezifische CSS-Klasse durch eine andere Klasse ersetzt wurde.
Methode 8: Werteigenschaft
Der ' Wert Die Eigenschaft „Tokenliste“ ruft die erforderlichen Werte ab, die dem ausgewählten HTML-Element zugewiesen sind. Wenn es neben dem „ Klassenliste ”-Eigenschaft werden die den ausgewählten Elementen zugewiesenen Klassen abgerufen, wie unten gezeigt:
< Skript >Funktion Aktion ( ) {
lass demoVal = dokumentieren. getElementById ( 'Anwendungsfall' ) . Klassenliste . Wert ;
dokumentieren. getElementById ( 'drucken' ) . innerHTML = demoVal ;
}
Skript >
Beschreibung des oben genannten Codeausschnitts:
- Innerhalb der „ Aktion ()“ Funktionskörper, der „ Wert Das Anwesen befindet sich neben dem „ Klassenliste ”-Eigenschaft, um alle zugewiesenen Klassen der ausgewählten HTML-Elemente abzurufen.
- Als nächstes wird das Ergebnis der obigen Eigenschaft in einer Variablen gespeichert „ demoVal ” und über das Element mit der ID „print“ eingefügt.
Nach Abschluss der Kompilierungsphase wird die Ausgabe auf einer Webseite wie folgt generiert:
Die Ausgabe zeigt die Namen der CSS-Klassen, die auf das ausgewählte Element angewendet werden.
Abschluss
Das HTML-DOM-TokenList-Objekt ist wie ein Array, das mehrere Methoden und Eigenschaften speichert, die verwendet werden, um bestimmte Funktionen auf das bereitgestellte HTML-Element anzuwenden. Einige der wichtigsten und am weitesten verbreiteten Methoden von TokenList sind „ add()“, „remove()“, „toggle()“, „contains()“, „item()“ und „replace()“ “. Die von der TokenList bereitgestellten Eigenschaften sind „ Länge ' Und ' Wert “. In diesem Artikel wurde die Vorgehensweise zum Arbeiten mit dem JavaScript-HTML-DOMTokenList-Objekt erläutert.