DOM ' TokenList ” indeholder en masse egenskaber eller metoder, som kan tilgås af slutbrugeren i henhold til deres krav. Egenskaberne og metoderne fra denne liste udfører specifikke operationer over de angivne datasæt og returnerer resultatet i overensstemmelse hermed. Det er mere som et array, fordi det har forskellige medlemmer, som kan vælges af deres indeks, og ligesom et array er det første indeks ' 0 ”. Men du kan ikke bruge metoder som ' pop()', 'push()' eller 'join() ”.
Denne blog vil forklare, hvordan HTML DOMTokenList-objekter fungerer ved hjælp af JavaScript.
Hvordan arbejder man med JavaScript HTML DOMTokenList-objekter?
HTML DOMTokenList er intet i sig selv, og dens værdi skyldes kun de egenskaber og metoder, der findes i den. Lad os besøge disse egenskaber og metoder i detaljer sammen med korrekt implementering.
Metode 1: Tilføj() metode
Det ' Tilføje ()' vedhæfter eller tildeler nye klasser, egenskaber eller simple tokens med det valgte element. Dens syntaks er angivet nedenfor:
htmlElement. tilføje ( oneOrMoreToken )
Dens implementering udføres gennem følgende kode:
< hoved >
< stil >
.skriftstørrelse{
skriftstørrelse: stor;
}
.farve{
baggrundsfarve: kadetblå;
farve: hvidrøg;
}
< / stil >
< / hoved >
< legeme >
< h1 stil = 'farve: kadetblå;' > Linux < / h1 >
< knap onclick = 'handling()' > Adder < / knap >
< s > Tryk på ovenstående knap for at anvende styling < / s >
< div id = 'valgte' >
< s > Jeg er valgt tekst. < / s >
< / div >
< manuskript >
funktion handling() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / manuskript >
< / legeme >
Forklaringen af ovenstående kode er som følger:
- Først skal du vælge to CSS-klasser ' skriftstørrelse ' og 'farve' og tildel dem tilfældige CSS-egenskaber som ' skriftstørrelse, 'baggrundsfarve' og 'farve ”.
- Opret derefter knapper ved hjælp af '< knap >' tag, der påkalder ' handling ()'-funktionen ved hjælp af ' onclick ” begivenhedslytter.
- Derudover skal du oprette en forælder ' div ' element og tildel det et id af ' valgte ” og indsæt dummy-data i den.
- Derefter skal du definere ' handling ()”-funktionen og gemmer referencen for det valgte element ved at få adgang til dets unikke id.
- Brug endelig ' klasseliste ' egenskab for at tildele klasserne og vedhæfte ' tilføje ()” metode. Send derefter CSS-klasserne inden for denne metodeparentes, og den vil anvende disse klasser på det valgte element.
Outputtet efter kompileringen af ovenstående kode genereres som:
Ovenstående gif bekræfter, at CSS-klasserne er blevet tildelt et valgt element via ' tilføje ()” metode.
Metode 2: Fjern() metode
Denne metode fjerner den specifikke klasse eller id fra et eller flere valgte elementer som gjort i nedenstående kode:
< hoved >< stil >
.skriftstørrelse {
skrift- størrelse : stor;
}
. farve {
baggrund- farve : kadetblå;
farve : hvid røg;
}
< / stil >
< / hoved >
< legeme >
< h1 stil = 'farve: kadetblå;' > Linuxhint < / h1 >
< knap onclick = 'handling()' >Adder< / knap >
< s >Tryk på ovenstående knap for at anvende styling< / s >
< div id = 'valgte' klasse = 'fontSize farve' >
< s > jeg er Valgte Tekst .< / s >
< / div >
< manuskript >
fungere handling ( ) {
document.getElementById ( 'valgte' ) .classList.remove ( 'farve' ) ;
}
< / manuskript >
< / legeme >
Beskrivelsen af ovenstående kode er som følger:
- Indledningsvis bruges koden forklaret i ovenstående kode her som et eksempel.
- Her er både ' farve ' og ' skriftstørrelse ” klasser er direkte knyttet til det valgte element.
- Derefter inde i ' handling ()'-funktionen, som aktiveres af ' onclick ' begivenhed lytter ' fjerne ()” token-metoden bruges.
- Denne metode tager en eller flere klasser, som skal fjernes fra det valgte element. I vores tilfælde er ' farve ” klasse vil blive fjernet fra det valgte HTML-element.
Outputtet for ovenstående kode vises som:
Ovenstående output viser, at den specifikke CSS-klasse er blevet fjernet fra det valgte element ved hjælp af 'remove()'-metoden.
Metode 3: Toggle() Metode
Det ' skifte ()' metode er kombinationen af begge ' tilføje ()' og ' fjerne ()' metoder. Det tildeler først den angivne CSS-klasse til det valgte HTML-element og fjerner det derefter i henhold til brugerens handlinger.
< html >< hoved >
< stil >
.skriftstørrelse {
skrift- størrelse : xx-stor;
}
. farve {
baggrund- farve : kadetblå;
farve : hvid røg;
}
< / stil >
< / hoved >
< legeme >
< h1 stil = 'farve: kadetblå;' > Linuxhint < / h1 >
< knap onclick = 'handling()' >Adder< / knap >
< s >Tryk på ovenstående knap for at anvende styling< / s >
< div id = 'valgte' >
< s > jeg er Valgte Tekst .< / s >
< / div >
< manuskript >
fungere handling ( ) {
document.getElementById ( 'valgte' ) .classList.toggle ( 'skriftstørrelse' ) ;
}
< / manuskript >
< / legeme >
< / html >
En beskrivelse af ovenstående kode er angivet nedenfor:
- Det samme program bruges som brugt i ovenstående afsnit, kun ' skifte ()'-metoden erstattes med ' fjerne ()” metode.
Ved afslutningen af kompileringsfasen vil outputtet være som følger:
Outputtet viser, at den specifikke CSS-klasse tilføjes og fjernes i henhold til brugerens handling.
Metode 4: Indeholder() metode
Det ' indeholder ()'-metoden bruges til at kontrollere tilgængeligheden af specifikke CSS-klasser over HTML-elementet, og dens implementering er angivet nedenfor:
< manuskript >fungere handling ( ) {
lad x = dokument. getElementById ( 'valgte' ) . klasseliste . indeholder ( 'skriftstørrelse' ) ;
dokument. getElementById ( 'prøve' ) . indreHTML = x ;
}
manuskript >
HTML- og CSS-delen forbliver den samme. Kun i '< manuskript >'-tag, anvendes 'contains()'-metoden over det valgte element for at kontrollere, om ' skriftstørrelse ” anvendes på dette element eller ej. Derefter vises resultatet på websiden på et HTML-element med et id ' prøve '.
Efter kompileringen af ovenstående kode ser websiden sådan ud:
Outputtet viser, at værdien af ' rigtigt ” returneres, hvilket betyder, at den specifikke CSS-klasse anvendes over det valgte HTML-element.
Metode 5: Item() Metode
Det ' vare ()'-metoden vælger tokenet eller CSS-klassen i henhold til deres indeksnummer, startende fra ' 0 ', som vist nedenfor:
< legeme >< h1 stil = 'farve: kadetblå;' > Linux h1 >
< knappen ved at klikke = 'handling()' > Checker knap >
< s > CSS klasse som er tildelt i første omgang , bliver hentet : s >
< h3 id = 'useCase' klasse = 'firstCls secondCls thirdCls' > h3 >
< manuskript >
fungere handling ( ) {
lad demoList = dokument. getElementById ( 'useCase' ) . klasseliste . vare ( 0 ) ;
dokument. getElementById ( 'useCase' ) . indreHTML = demoliste ;
}
manuskript >
legeme >
Forklaring af ovenstående kode:
- Først tildeles flere CSS-klasser til vores valgte element med et id på ' useCase ' og 'action()'-metoden, som bliver påkaldt via ' onclick ' begivenhed.
- I denne funktion er ' vare ()' metode med et indeks på ' 0 ” bliver knyttet til det valgte element. Resultatet gemmes i variablen ' demoliste ', som derefter udskrives over websiden ved hjælp af ' indreHTML ” ejendom.
Efter afslutningen af kompileringen kommer outputtet sådan her:
Outputtet viser navnet på CSS-klassen, som først gælder over det valgte element og hentes.
Metode 6: længde Ejendom
Det ' længde ” egenskaben af tokenList returnerer antallet af elementer eller tildelte klasser, der anvendes over det valgte element. Implementeringsprocessen er angivet nedenfor:
< manuskript >fungere handling ( ) {
lad dem rive ned = dokument. getElementById ( 'useCase' ) . klasseliste . længde ;
dokument. getElementById ( 'useCase' ) . indreHTML = nedrive ;
}
manuskript >
I ovenstående kodeblok:
- Først ' længde ' ejendom er knyttet til ' klasseliste ” egenskab for at hente antallet af klasser, der er tildelt over det valgte element.
- Dernæst bliver resultatet af egenskaben gemt i variablen ' nedrive ', som vil blive vist over websiden på et element med et id på ' useCase '.
- Resten af koden forbliver den samme som i ovenstående afsnit.
Det genererede output efter kompileringen er angivet nedenfor:
Outputtet returnerer de anvendte klasser over elementet.
Metode 7: Erstat() metode
Det ' erstatte ()” metode er en, der tager mindst to parametre og erstatter den første parameter med den anden parameter for det valgte element, som vist nedenfor:
< manuskript >fungere handling ( ) {
lad demoList = dokument. getElementById ( 'useCase' ) . klasseliste . erstatte ( 'skriftstørrelse' , 'farve' ) ;
}
manuskript >
Her er CSS ' skriftstørrelse ' klasse erstattes med CSS ' farve ' klasse for et element med et id på ' useCase ”. Resten af HTML- og CSS-koden forbliver den samme som i ovenstående afsnit.
Efter at have ændret ' manuskript ” del og kompilering af hoved-HTML-filen, ser outputtet sådan ud:
Outputtet viser, at den specifikke CSS-klasse er blevet erstattet med en anden klasse.
Metode 8: Værdi ejendom
Det ' værdi ” token list-egenskab henter de nødvendige værdier, der er tildelt det valgte HTML-element. Når det bliver fastgjort ved siden af ' klasseliste egenskab, bliver klasserne, der er tildelt de valgte elementer, hentet, som vist nedenfor:
< manuskript >fungere handling ( ) {
lad demoVal = dokument. getElementById ( 'useCase' ) . klasseliste . værdi ;
dokument. getElementById ( 'Print' ) . indreHTML = demoVal ;
}
manuskript >
Beskrivelse af det ovennævnte kodestykke:
- Inde i ' handling ()' funktionstekst, ' værdi ” Ejendommen er knyttet ved siden af ” klasseliste ” egenskab for at hente alle tildelte klasser af de valgte HTML-elementer.
- Dernæst bliver resultatet af ovenstående egenskab gemt i en variabel ' demoVal ” og indsat over elementet med et id på “print”.
Efter afslutningen af kompileringsfasen genereres output på en webside som følger:
Outputtet viser navnet på CSS-klasser, som anvendes over det valgte element.
Konklusion
HTML DOM TokenList-objektet er som et array, der gemmer flere metoder og egenskaber, som bruges til at anvende specifik funktionalitet over det leverede HTML-element. Nogle af de vigtigste og mest brugte metoder leveret af TokenList er ' add()”, “remove()”, “toggle()”, “contains()”, “item()” og “replace() ”. De egenskaber, der leveres af TokenList er ' længde ' og ' værdi ”. Denne artikel har forklaret proceduren for at arbejde med JavaScript HTML DOMTokenList-objektet.