DOM ' TokenList ” innehåller många egenskaper eller metoder som kan nås av slutanvändaren enligt deras krav. Egenskaperna och metoderna som tillhandahålls av den här listan utför specifika operationer över de tillhandahållna datamängderna och returnerar resultatet därefter. Det är mer som en array eftersom den har olika medlemmar som kan väljas av deras index och precis som en array är det första indexet ' 0 ”. Men du kan inte använda metoder som ' pop()”, “push()” eller “join() ”.
Den här bloggen kommer att förklara hur HTML DOMTokenList-objekt fungerar med JavaScript.
Hur man arbetar med JavaScript HTML DOMTokenList-objekt?
HTML DOMTokenList är ingenting i sig och dess värde beror bara på egenskaperna och metoderna som finns i den. Låt oss besöka dessa egenskaper och metoder i detalj tillsammans med korrekt implementering.
Metod 1: Add() Metod
den ' Lägg till ()” bifogar eller tilldelar nya klasser, egenskaper eller enkla tokens med det valda elementet. Dess syntax anges nedan:
htmlElement. Lägg till ( oneOrMoreToken )
Dess implementering utförs genom följande kod:
< huvud >
< stil >
.textstorlek{
teckenstorlek: stor;
}
.Färg{
bakgrundsfärg: kadettblå;
färg: vitrök;
}
< / stil >
< / huvud >
< kropp >
< h1 stil = 'färg: kadettblå;' > Linux < / h1 >
< knapp onclick = 'handling()' > Huggorm < / knapp >
< sid > Tryck på ovanstående knapp för att tillämpa styling < / sid >
< div id = 'vald' >
< sid > Jag är utvald text. < / sid >
< / div >
< manus >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / manus >
< / kropp >
Förklaringen av ovanstående kod är följande:
- Välj först två CSS-klasser ' textstorlek ' och 'färg' och tilldela dem slumpmässiga CSS-egenskaper som ' font-size”, “background-color” och “color ”.
- Skapa sedan knappar med hjälp av '< knapp >'-taggen som anropar ' handling ()'-funktionen med ' onclick ” event lyssnare.
- Skapa dessutom en förälder ' div ' element och tilldela det ett id för ' vald ” och infoga dummydata i den.
- Efter det definierar du ' handling ()”-funktionen och lagra referensen för det valda elementet genom att komma åt dess unika id.
- Använd slutligen ' klasslista '-egenskapen för att tilldela klasserna och bifoga ' Lägg till ()”-metoden. Skicka sedan CSS-klasserna inom denna metodparentes och den kommer att tillämpa dessa klasser på det valda elementet.
Utdata efter kompileringen av ovanstående kod genereras som:
Ovanstående gif bekräftar att CSS-klasserna har tilldelats ett valt element via ' Lägg till ()”-metoden.
Metod 2: Remove() Method
Den här metoden tar bort den specifika klassen eller id:t från ett eller flera valda element enligt nedanstående kod:
< huvud >< stil >
.textstorlek {
font- storlek : stor;
}
. Färg {
bakgrund- Färg : kadettblå;
Färg : vit rök;
}
< / stil >
< / huvud >
< kropp >
< h1 stil = 'färg: kadettblå;' > Linuxhint < / h1 >
< knapp onclick = 'handling()' >Adder< / knapp >
< sid >Tryck på ovanstående knapp för att tillämpa styling< / sid >
< div id = 'vald' klass = 'fontSize color' >
< sid > jag är Vald Text .< / sid >
< / div >
< manus >
fungera handling ( ) {
document.getElementById ( 'vald' ) .classList.remove ( 'Färg' ) ;
}
< / manus >
< / kropp >
Beskrivningen av ovanstående kod är följande:
- Inledningsvis används koden som förklaras i ovanstående kod här som ett exempel.
- Här är både ' Färg ' och ' textstorlek ” klasser tilldelas direkt till det valda elementet.
- Efter det, inuti ' handling ()'-funktionen som anropas av ' onclick ' event lyssnare den ' avlägsna ()” token-metoden används.
- Denna metod tar en eller flera klasser som kommer att tas bort från det valda elementet. I vårt fall är ' Färg ”-klassen kommer att tas bort från det valda HTML-elementet.
Utdata för ovanstående kod visas som:
Ovanstående utdata visar att den specifika CSS-klassen har tagits bort från det valda elementet med metoden 'remove()'.
Metod 3: Toggle() Metod
den ' växla ()'-metoden är kombinationen av båda ' Lägg till ()' och ' avlägsna ()” metoder. Den tilldelar först den angivna CSS-klassen till det valda HTML-elementet och tar sedan bort det enligt användarens handlingar.
< html >< huvud >
< stil >
.textstorlek {
font- storlek : xx-stor;
}
. Färg {
bakgrund- Färg : kadettblå;
Färg : vit rök;
}
< / stil >
< / huvud >
< kropp >
< h1 stil = 'färg: kadettblå;' > Linuxhint < / h1 >
< knapp onclick = 'handling()' >Adder< / knapp >
< sid >Tryck på ovanstående knapp för att tillämpa styling< / sid >
< div id = 'vald' >
< sid > jag är Vald Text .< / sid >
< / div >
< manus >
fungera handling ( ) {
document.getElementById ( 'vald' ) .classList.toggle ( 'textstorlek' ) ;
}
< / manus >
< / kropp >
< / html >
En beskrivning av ovanstående kod anges nedan:
- Samma program används som i avsnittet ovan, endast ' växla ()'-metoden ersätts med ' avlägsna ()”-metoden.
I slutet av kompileringsfasen blir utdata som följer:
Utdata visar att den specifika CSS-klassen läggs till och tas bort enligt användarens åtgärd.
Metod 4: Innehåller() metod
den ' innehåller ()”-metoden används för att kontrollera tillgängligheten för specifika CSS-klasser över HTML-elementet och dess implementering anges nedan:
< manus >fungera handling ( ) {
låt x = dokumentera. getElementById ( 'vald' ) . klasslista . innehåller ( 'textstorlek' ) ;
dokumentera. getElementById ( 'testa' ) . innerHTML = x ;
}
manus >
HTML- och CSS-delen förblir densamma. Endast i '< manus >'-taggen, används metoden 'contains()' över det valda elementet för att kontrollera om ' textstorlek ” tillämpas på det elementet eller inte. Sedan visas resultatet på webbsidan på ett HTML-element som har ett id ' testa ”.
Efter sammanställningen av ovanstående kod ser webbsidan ut så här:
Utdata visar att värdet på ' Sann ” returneras vilket betyder att den specifika CSS-klassen tillämpas över det valda HTML-elementet.
Metod 5: Item() Metod
den ' Artikel ()'-metoden väljer token eller CSS-klassen enligt deras indexnummer, med början från ' 0 ', enligt nedanstående:
< kropp >< h1 stil = 'färg: kadettblå;' > Linux h1 >
< knappen när du klickar = 'handling()' > Checker knapp >
< sid > CSS klass som tilldelas först , hämtas : sid >
< h3 id = 'användningsfall' klass = 'firstCls secondCls thirdCls' > h3 >
< manus >
fungera handling ( ) {
låt demoList = dokumentera. getElementById ( 'användningsfall' ) . klasslista . Artikel ( 0 ) ;
dokumentera. getElementById ( 'användningsfall' ) . innerHTML = demoList ;
}
manus >
kropp >
Förklaring av ovanstående kod:
- Först tilldelas flera CSS-klasser till vårt valda element med ett id på ' användningsfall ” och metoden ”action()” som anropas via ” onclick ' händelse.
- I den här funktionen är ' Artikel ()'-metoden med ett index på ' 0 ” kopplas till det valda elementet. Resultatet lagras i variabeln ' demoList ” som sedan skrivs ut över webbsidan med hjälp av ” innerHTML ' fast egendom.
Efter slutet av kompileringen kommer resultatet så här:
Utdata visar namnet på CSS-klassen som först gäller över det valda elementet och hämtas.
Metod 6: längd Egenskap
den ' längd ” egenskapen för tokenList returnerar antalet element eller tilldelade klasser som tillämpas över det valda elementet. Implementeringsprocessen anges nedan:
< manus >fungera handling ( ) {
låt dem riva = dokumentera. getElementById ( 'användningsfall' ) . klasslista . längd ;
dokumentera. getElementById ( 'användningsfall' ) . innerHTML = förstöra ;
}
manus >
I ovanstående kodblock:
- Först ' längd ' egendom är kopplad till ' klasslista ” egenskap för att hämta antalet klasser som är tilldelade över det valda elementet.
- Därefter lagras resultatet av egenskapen i variabeln ' förstöra ' som kommer att visas över webbsidan på ett element med ett id på ' användningsfall ”.
- Resten av koden förblir densamma som i avsnittet ovan.
Den genererade utdata efter kompileringen anges nedan:
Utdata returnerar de tillämpade klasserna över elementet.
Metod 7: Replace() Method
den ' byta ut ()”-metoden är en som tar minst två parametrar och ersätter den första parametern med den andra parametern för det valda elementet, som visas nedan:
< manus >fungera handling ( ) {
låt demoList = dokumentera. getElementById ( 'användningsfall' ) . klasslista . byta ut ( 'textstorlek' , 'Färg' ) ;
}
manus >
Här, CSS ' textstorlek ' klassen ersätts med CSS ' Färg ' klass för ett element med ett id på ' användningsfall ”. Resten av HTML- och CSS-koden förblir densamma som i avsnitten ovan.
Efter att ha ändrat ' manus '-delen och kompilerar huvud-HTML-filen, resultatet ser ut så här:
Utdata visar att den specifika CSS-klassen har ersatts med en annan klass.
Metod 8: Value Property
den ' värde ” token list-egenskapen hämtar de nödvändiga värdena som tilldelats det valda HTML-elementet. När den fästs bredvid ' klasslista ”-egenskapen hämtas klasserna som tilldelats de valda elementen, som visas nedan:
< manus >fungera handling ( ) {
låt demoVal = dokumentera. getElementById ( 'användningsfall' ) . klasslista . värde ;
dokumentera. getElementById ( 'skriva ut' ) . innerHTML = demoVal ;
}
manus >
Beskrivning av ovanstående kodavsnitt:
- Inuti ' handling ()' funktionskropp, ' värde ” fastigheten är bifogad bredvid ” klasslista ”-egenskapen för att hämta alla tilldelade klasser av de valda HTML-elementen.
- Därefter lagras resultatet av ovanstående egenskap i en variabel ' demoVal ” och infogas över elementet med ID:t ”print”.
Efter slutet av kompileringsfasen genereras utdata på en webbsida enligt följande:
Utdata visar namnet på CSS-klasser som tillämpas över det valda elementet.
Slutsats
HTML DOM TokenList-objektet är som en array som lagrar flera metoder och egenskaper som används för att tillämpa specifik funktionalitet över det tillhandahållna HTML-elementet. Några av de viktigaste och mest använda metoderna som tillhandahålls av TokenList är ' add()”, “remove()”, “toggle()”, “contains()”, “item()” och “replace() ”. Egenskaperna som tillhandahålls av TokenList är ' längd ' och ' värde ”. Den här artikeln har förklarat proceduren för att arbeta med JavaScript HTML DOMTokenList-objektet.