De DOM“ TokenLijst ” bevat veel eigenschappen of methoden waartoe de eindgebruiker toegang kan krijgen op basis van zijn vereisten. De eigenschappen en methoden uit deze lijst voeren specifieke bewerkingen uit op de opgegeven gegevenssets en retourneren het resultaat dienovereenkomstig. Het lijkt meer op een array omdat het verschillende leden heeft die kunnen worden geselecteerd op basis van hun index en net als een array is de eerste index “ 0 ”. Maar je kunt geen methoden gebruiken als “ pop()”, “push()” of “join() ”.
In deze blog wordt de werking van HTML DOMTokenList Objects door JavaScript uitgelegd.
Hoe te werken met JavaScript HTML DOMTokenList-objecten?
De HTML DOMTokenList is op zichzelf niets en zijn waarde is alleen te danken aan de eigenschappen en methoden die erin voorkomen. Laten we deze eigenschappen en methoden in detail bekijken, samen met de juiste implementatie.
Methode 1: Add()-methode
De ' Toevoegen ()” voegt nieuwe klassen, eigenschappen of eenvoudige tokens toe aan het geselecteerde element of wijst deze toe. De syntaxis ervan wordt hieronder vermeld:
htmlElement. toevoegen ( oneOrMoreToken )
De implementatie ervan wordt uitgevoerd via de volgende code:
< hoofd >
< stijl >
.lettertypegrootte{
lettergrootte: groot;
}
.kleur{
achtergrondkleur: cadetblauw;
kleur: witte rook;
}
< / stijl >
< / hoofd >
< lichaam >
< h1 stijl = 'kleur: cadetblauw;' > Linux < / h1 >
< knop bij klikken = 'actie()' > Adder < / knop >
< P > Druk op de bovenstaande knop om styling toe te passen < / P >
< div ID kaart = 'geselecteerd' >
< P > Ik ben geselecteerde tekst. < / P >
< / div >
< script >
functie actie() {
document.getElementById('geselecteerd').classList.add('fontSize', 'kleur');
}
< / script >
< / lichaam >
De uitleg van de bovenstaande code is als volgt:
- Selecteer eerst twee CSS-klassen “ lettertypegrootte ' en 'kleur' en wijs ze willekeurige CSS-eigenschappen toe, zoals ' lettergrootte”, “achtergrondkleur” en “kleur ”.
- Maak vervolgens knoppen met behulp van de “< knop >”tag die de “ actie ()”-functie met behulp van de “ bij klikken gebeurtenisluisteraar.
- Maak daarnaast een ouder aan “ div ”-element en wijs het de id “ geselecteerd ' en plaats er dummygegevens in.
- Definieer daarna de “ actie ()”-functie en sla de referentie van het geselecteerde element op door toegang te krijgen tot zijn unieke ID.
- Gebruik ten slotte de “ klasseLijst ” eigenschap om de klassen toe te wijzen en de “ toevoegen ()” methode. Geef vervolgens de CSS-klassen door tussen haakjes van deze methode en deze klassen worden toegepast op het geselecteerde element.
De uitvoer na het compileren van de bovenstaande code wordt gegenereerd als:
Bovenstaande gif bevestigt dat de CSS-klassen zijn toegewezen aan een geselecteerd element via de “ toevoegen ()” methode.
Methode 2: Remove()-methode
Deze methode verwijdert de specifieke klasse of id van een of meer geselecteerde elementen, zoals gedaan in onderstaande code:
< hoofd >< stijl >
.lettertypegrootte {
lettertype- maat : groot;
}
. kleur {
achtergrond- kleur : cadetblauw;
kleur : witte rook;
}
< / stijl >
< / hoofd >
< lichaam >
< h1 stijl = 'kleur: cadetblauw;' > Linuxhint < / h1 >
< knop bij klikken = 'actie()' >Adder< / knop >
< P >Druk op de bovenstaande knop om styling toe te passen< / P >
< div ID kaart = 'geselecteerd' klas = 'lettergrootte kleur' >
< P >Ik ben Geselecteerd Tekst .< / P >
< / div >
< script >
functie actie ( ) {
document.getElementById ( 'geselecteerd' ) .classList.verwijderen ( 'kleur' ) ;
}
< / script >
< / lichaam >
De beschrijving van de bovenstaande code is als volgt:
- In eerste instantie wordt de code die in de bovenstaande code wordt uitgelegd, hier als voorbeeld gebruikt.
- Hier zijn zowel de “ kleur ' En ' lettertypegrootte ”-klassen worden rechtstreeks aan het geselecteerde element toegewezen.
- Daarna, binnen de “ actie ()”-functie die wordt aangeroepen door de “ bij klikken ” gebeurtenis luisteraar de “ verwijderen ()”-tokenmethode wordt gebruikt.
- Deze methode gebruikt een of meerdere klassen die uit het geselecteerde element worden verwijderd. In ons geval is de “ kleur ”-klasse wordt verwijderd uit het geselecteerde HTML-element.
De uitvoer voor de bovenstaande code wordt weergegeven als:
De bovenstaande uitvoer laat zien dat de specifieke CSS-klasse uit het geselecteerde element is verwijderd met behulp van de “remove()” -methode.
Methode 3: Toggle()-methode
De ' schakelaar ()”methode is de combinatie van beide “ toevoegen ()' En ' verwijderen ()” methoden. Het wijst eerst de opgegeven CSS-klasse toe aan het geselecteerde HTML-element en verwijdert het vervolgens op basis van de acties van de gebruiker.
< html >< hoofd >
< stijl >
.lettertypegrootte {
lettertype- maat : xx-groot;
}
. kleur {
achtergrond- kleur : cadetblauw;
kleur : witte rook;
}
< / stijl >
< / hoofd >
< lichaam >
< h1 stijl = 'kleur: cadetblauw;' > Linuxhint < / h1 >
< knop bij klikken = 'actie()' >Adder< / knop >
< P >Druk op de bovenstaande knop om styling toe te passen< / P >
< div ID kaart = 'geselecteerd' >
< P >Ik ben Geselecteerd Tekst .< / P >
< / div >
< script >
functie actie ( ) {
document.getElementById ( 'geselecteerd' ) .classList.toggle ( 'lettertypegrootte' ) ;
}
< / script >
< / lichaam >
< / html >
Een beschrijving van de bovenstaande code vindt u hieronder:
- Er wordt hetzelfde programma gebruikt als in de bovenstaande sectie, alleen de “ schakelaar ()”methode wordt vervangen door de “ verwijderen ()” methode.
Aan het einde van de compilatiefase zal de uitvoer er als volgt uitzien:
De uitvoer laat zien dat de specifieke CSS-klasse wordt toegevoegd en verwijderd op basis van de actie van de gebruiker.
Methode 4: Bevat() Methode
De ' bevat ()”-methode wordt gebruikt om de beschikbaarheid van specifieke CSS-klassen via het HTML-element te controleren en de implementatie ervan wordt hieronder vermeld:
< script >functie actie ( ) {
laat x = document. getElementById ( 'geselecteerd' ) . klasseLijst . bevat ( 'lettertypegrootte' ) ;
document. getElementById ( 'test' ) . innerlijkeHTML = X ;
}
script >
Het HTML- en CSS-gedeelte blijft hetzelfde. Alleen in de “< script >” tag, wordt de methode “contains()” toegepast op het geselecteerde element om te controleren of de “ lettertypegrootte ” wordt op dat element toegepast of niet. Vervolgens wordt het resultaat weergegeven op de webpagina op een HTML-element met een id “ test ”.
Na het compileren van de bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer laat zien dat de waarde van “ WAAR ” wordt geretourneerd, wat betekent dat de specifieke CSS-klasse wordt toegepast op het geselecteerde HTML-element.
Methode 5: Item()-methode
De ' item ()”methode selecteert de token- of CSS-klasse op basis van hun indexnummer, beginnend bij “ 0 ”, zoals hieronder weergegeven:
< lichaam >< h1-stijl = 'kleur: cadetblauw;' > Linux h1 >
< knop opklik = 'actie()' > Controleur knop >
< P > De CSS klas die in eerste instantie wordt toegewezen , wordt opgehaald : P >
< h3 idd = 'useCase' klas = 'eersteCls tweedeCls derdeCls' > h3 >
< script >
functie actie ( ) {
laat demoList = document. getElementById ( 'useCase' ) . klasseLijst . item ( 0 ) ;
document. getElementById ( 'useCase' ) . innerlijkeHTML = demoLijst ;
}
script >
lichaam >
Verklaring van de bovenstaande code:
- Eerst worden meerdere CSS-klassen toegewezen aan ons geselecteerde element met de id “ gebruikCase ” en de “action()”-methode die wordt aangeroepen via de “ bij klikken ' evenement.
- In deze functie is de “ item ()”methode met een index van “ 0 ” wordt aan het geselecteerde element gekoppeld. Het resultaat wordt opgeslagen in de variabele “ demoLijst ', die vervolgens via de webpagina wordt afgedrukt met behulp van de ' innerlijkeHTML ' eigendom.
Na het einde van de compilatie ziet de uitvoer er als volgt uit:
De uitvoer toont de naam van de CSS-klasse die in eerste instantie van toepassing is op het geselecteerde element en wordt opgehaald.
Methode 6: lengte-eigenschap
De ' lengte De eigenschap van tokenList retourneert het aantal elementen of toegewezen klassen die op het geselecteerde element worden toegepast. Het implementatieproces wordt hieronder beschreven:
< script >functie actie ( ) {
laat ze slopen = document. getElementById ( 'useCase' ) . klasseLijst . lengte ;
document. getElementById ( 'useCase' ) . innerlijkeHTML = slopen ;
}
script >
In het bovenstaande codeblok:
- Eerst de ' lengte ‘eigendom is verbonden aan de’ klasseLijst ” om het aantal klassen op te halen dat aan het geselecteerde element is toegewezen.
- Vervolgens wordt het resultaat van de eigenschap opgeslagen in de variabele “ slopen ' die op de webpagina wordt weergegeven op een element met de id ' gebruikCase ”.
- De rest van de code blijft hetzelfde als in de bovenstaande sectie.
De gegenereerde uitvoer na de compilatie wordt hieronder vermeld:
De uitvoer retourneert de toegepaste klassen over het element.
Methode 7: Vervang()-methode
De ' vervangen ()”-methode is er een die ten minste twee parameters gebruikt en de eerste parameter vervangt door de tweede parameter voor het geselecteerde element, zoals hieronder weergegeven:
< script >functie actie ( ) {
laat demoList = document. getElementById ( 'useCase' ) . klasseLijst . vervangen ( 'lettertypegrootte' , 'kleur' ) ;
}
script >
Hier de CSS “ lettertypegrootte ” klasse is vervangen door de CSS “ kleur ” klasse voor een element met de id “ gebruikCase ”. De rest van de HTML- en CSS-code blijft hetzelfde als in de bovenstaande secties.
Na het wijzigen van de “ script ”-gedeelte en het compileren van het hoofd-HTML-bestand, ziet de uitvoer er als volgt uit:
De uitvoer laat zien dat de specifieke CSS-klasse is vervangen door een andere klasse.
Methode 8: Waardeeigenschap
De ' waarde De tokenlijsteigenschap haalt de vereiste waarden op die aan het geselecteerde HTML-element zijn toegewezen. Wanneer het wordt bevestigd naast de “ klasseLijst ”-eigenschap worden de klassen die aan de geselecteerde elementen zijn toegewezen, opgehaald, zoals hieronder wordt gedemonstreerd:
< script >functie actie ( ) {
laat demoVal = document. getElementById ( 'useCase' ) . klasseLijst . waarde ;
document. getElementById ( 'afdrukken' ) . innerlijkeHTML = demoVal ;
}
script >
Beschrijving van het bovengenoemde codefragment:
- Binnen in de ' actie ()” functielichaam, de “ waarde ” eigendom is bevestigd naast de “ klasseLijst ”-eigenschap om alle toegewezen klassen van de geselecteerde HTML-elementen op te halen.
- Vervolgens wordt het resultaat van de bovenstaande eigenschap opgeslagen in een variabele “ demoVal ' en ingevoegd over het element met de id 'print'.
Na het einde van de compilatiefase wordt de uitvoer op een webpagina als volgt gegenereerd:
De uitvoer toont de naam van CSS-klassen die op het geselecteerde element worden toegepast.
Conclusie
Het HTML DOM TokenList-object is als een array waarin meerdere methoden en eigenschappen zijn opgeslagen die worden gebruikt om specifieke functionaliteit toe te passen op het opgegeven HTML-element. Enkele van de belangrijkste en meest gebruikte methoden van TokenList zijn “ add()”, “remove()”, “toggle()”, “contains()”, “item()” en “replace() ”. De eigenschappen die door de TokenList worden geleverd, zijn “ lengte ' En ' waarde ”. In dit artikel wordt de procedure uitgelegd om met het JavaScript HTML DOMTokenList-object te werken.