DOM ' TokenList ” inneholder mange egenskaper eller metoder som sluttbrukeren kan få tilgang til i henhold til deres krav. Egenskapene og metodene gitt av denne listen utfører spesifikke operasjoner over de angitte datasettene og returnerer resultatet deretter. Det er mer som en matrise fordi den har forskjellige medlemmer som kan velges av deres indeks og akkurat som en matrise er den første indeksen ' 0 '. Men du kan ikke bruke metoder som ' pop()', 'push()' eller 'join() '.
Denne bloggen vil forklare hvordan HTML DOMTokenList-objekter fungerer med JavaScript.
Hvordan jobbe med JavaScript HTML DOMTokenList-objekter?
HTML DOMTokenList er ingenting i seg selv, og verdien er bare på grunn av egenskapene og metodene som ligger i den. La oss besøke disse egenskapene og metodene i detalj sammen med riktig implementering.
Metode 1: Add() Metode
« Legg til ()» legger ved eller tildeler nye klasser, egenskaper eller enkle tokens med det valgte elementet. Syntaksen er angitt nedenfor:
htmlElement. Legg til ( oneOrMoreToken )
Implementeringen utføres gjennom følgende kode:
< hode >
< stil >
.skriftstørrelse{
skriftstørrelse: stor;
}
.farge{
bakgrunnsfarge: kadettblå;
farge: whitesmoke;
}
< / stil >
< / hode >
< kropp >
< h1 stil = 'farge: kadettblå;' > Linux < / h1 >
< knapp ved trykk = 'handling()' > Huggorm < / knapp >
< s > Trykk på knappen ovenfor for å bruke styling < / s >
< div id = 'valgt' >
< s > Jeg er valgt tekst. < / s >
< / div >
< manus >
funksjon handling() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / manus >
< / kropp >
Forklaringen av koden ovenfor er som følger:
- Først velger du to CSS-klasser ' skriftstørrelse ' og 'farge' og tilordne dem tilfeldige CSS-egenskaper som ' font-size”, “background-color” og “color '.
- Deretter oppretter du knapper ved å bruke «< knapp >'-taggen som påkaller ' handling ()'-funksjonen ved å bruke ' ved trykk ” hendelseslytter.
- Opprett i tillegg en forelder ' div '-element og tilordne det en ID av ' valgt ” og sett inn dummy-data i den.
- Etter det, definer ' handling ()”-funksjonen og lagre referansen til det valgte elementet ved å få tilgang til dets unike ID.
- Til slutt bruker du ' klasseliste '-egenskapen for å tildele klassene og legge ved ' Legg til ()»-metoden. Send deretter CSS-klassene i denne metodeparentesen, og den vil bruke disse klassene til det valgte elementet.
Utgangen etter kompileringen av koden ovenfor genereres som:
Ovennevnte gif bekrefter at CSS-klassene har blitt tildelt et valgt element via ' Legg til ()»-metoden.
Metode 2: Remove() Method
Denne metoden fjerner den spesifikke klassen eller ID-en fra ett eller flere valgte elementer som gjort i koden nedenfor:
< hode >< stil >
.skriftstørrelse {
font- størrelse : stor;
}
. farge {
bakgrunn- farge : kadettblå;
farge : hvit røyk;
}
< / stil >
< / hode >
< kropp >
< h1 stil = 'farge: kadettblå;' > Linuxhint < / h1 >
< knapp ved trykk = 'handling()' >Hoggor< / knapp >
< s >Trykk på knappen ovenfor for å bruke styling< / s >
< div id = 'valgt' klasse = 'fontSize color' >
< s >jeg er Valgt Tekst .< / s >
< / div >
< manus >
funksjon handling ( ) {
document.getElementById ( 'valgt' ) .classList.remove ( 'farge' ) ;
}
< / manus >
< / kropp >
Beskrivelsen av koden ovenfor er som følger:
- Til å begynne med brukes koden som er forklart i koden ovenfor her som et eksempel.
- Her er både ' farge ' og ' skriftstørrelse ” klasser er direkte tilordnet det valgte elementet.
- Etter det, inne i ' handling ()'-funksjonen som påkalles av ' ved trykk « arrangementslytteren « fjerne ()» token-metoden brukes.
- Denne metoden tar en eller flere klasser som skal fjernes fra det valgte elementet. I vårt tilfelle er ' farge '-klassen vil bli fjernet fra det valgte HTML-elementet.
Utdataene for koden ovenfor vises som:
Ovennevnte utdata viser at den spesifikke CSS-klassen har blitt fjernet fra det valgte elementet ved å bruke 'remove()'-metoden.
Metode 3: Toggle() Metode
« veksle ()»-metoden er kombinasjonen av begge « Legg til ()» og « fjerne ()»-metoder. Den tildeler først den angitte CSS-klassen til det valgte HTML-elementet og fjerner det deretter i henhold til brukerens handlinger.
< html >< hode >
< stil >
.skriftstørrelse {
font- størrelse : xx-stor;
}
. farge {
bakgrunn- farge : kadettblå;
farge : hvit røyk;
}
< / stil >
< / hode >
< kropp >
< h1 stil = 'farge: kadettblå;' > Linuxhint < / h1 >
< knapp ved trykk = 'handling()' >Hoggor< / knapp >
< s >Trykk på knappen ovenfor for å bruke styling< / s >
< div id = 'valgt' >
< s >jeg er Valgt Tekst .< / s >
< / div >
< manus >
funksjon handling ( ) {
document.getElementById ( 'valgt' ) .classList.toggle ( 'skriftstørrelse' ) ;
}
< / manus >
< / kropp >
< / html >
En beskrivelse av koden ovenfor er angitt nedenfor:
- Det samme programmet brukes som i avsnittet ovenfor, bare ' veksle ()»-metoden erstattes med « fjerne ()»-metoden.
På slutten av kompileringsfasen vil utgangen være som følger:
Utdataene viser at den spesifikke CSS-klassen blir lagt til og fjernet i henhold til brukerens handling.
Metode 4: Inneholder() metode
« inneholder ()»-metoden brukes til å sjekke tilgjengeligheten til spesifikke CSS-klasser over HTML-elementet, og implementeringen er angitt nedenfor:
< manus >funksjon handling ( ) {
la x = dokument. getElementById ( 'valgt' ) . klasseliste . inneholder ( 'skriftstørrelse' ) ;
dokument. getElementById ( 'test' ) . indreHTML = x ;
}
manus >
HTML- og CSS-delen forblir den samme. Bare i «< manus >'-taggen, brukes 'contains()'-metoden over det valgte elementet for å sjekke om ' skriftstørrelse ' brukes på det elementet eller ikke. Deretter vises resultatet på nettsiden på et HTML-element som har en id ' test '.
Etter kompileringen av koden ovenfor, ser nettsiden slik ut:
Utdataene viser at verdien av ' ekte ” returneres som betyr at den spesifikke CSS-klassen brukes over det valgte HTML-elementet.
Metode 5: Element() Metode
« punkt ()»-metoden velger token eller CSS-klassen i henhold til deres indeksnummer, fra « 0 ', som vist under:
< kropp >< h1 stil = 'farge: kadettblå;' > Linux h1 >
< knappen ved å klikke = 'handling()' > Checker knapp >
< s > CSS klasse som er tildelt først , blir hentet : s >
< h3 id = 'useCase' klasse = 'firstCls secondCls thirdCls' > h3 >
< manus >
funksjon handling ( ) {
la demoList = dokument. getElementById ( 'useCase' ) . klasseliste . punkt ( 0 ) ;
dokument. getElementById ( 'useCase' ) . indreHTML = demoliste ;
}
manus >
kropp >
Forklaring av koden ovenfor:
- Først tildeles flere CSS-klasser til vårt valgte element med en id på ' useCase ' og 'action()'-metoden som blir påkalt via ' ved trykk ' begivenhet.
- I denne funksjonen ' punkt ()»-metoden med en indeks på « 0 ” blir knyttet til det valgte elementet. Resultatet blir lagret i variabelen ' demoliste ' som deretter skrives ut over nettsiden ved å bruke ' indreHTML ' eiendom.
Etter slutten av kompileringen kommer utdataene slik:
Utdataene viser navnet på CSS-klassen som først gjelder over det valgte elementet og hentes.
Metode 6: lengde Eiendom
« lengde ” egenskapen til tokenList returnerer antall elementer eller tildelte klasser som brukes over det valgte elementet. Implementeringsprosessen er angitt nedenfor:
< manus >funksjon handling ( ) {
la dem rive = dokument. getElementById ( 'useCase' ) . klasseliste . lengde ;
dokument. getElementById ( 'useCase' ) . indreHTML = rive ;
}
manus >
I kodeblokken ovenfor:
- Først ' lengde ' eiendommen er knyttet til ' klasseliste ”-egenskap for å hente antall klasser som er tildelt over det valgte elementet.
- Deretter blir resultatet av egenskapen lagret i variabelen ' rive ' som vil vises over nettsiden på et element med en id på ' useCase '.
- Resten av koden forblir den samme som i avsnittet ovenfor.
Den genererte utgangen etter kompileringen er angitt nedenfor:
Utdataene returnerer de anvendte klassene over elementet.
Metode 7: Erstatt() metode
« erstatte ()»-metoden er en som tar minst to parametere og erstatter den første parameteren med den andre parameteren for det valgte elementet, som vist nedenfor:
< manus >funksjon handling ( ) {
la demoList = dokument. getElementById ( 'useCase' ) . klasseliste . erstatte ( 'skriftstørrelse' , 'farge' ) ;
}
manus >
Her, CSS ' skriftstørrelse ' klasse erstattes med CSS ' farge ' klasse for et element med en id på ' useCase '. Resten av HTML- og CSS-koden forblir den samme som i avsnittene ovenfor.
Etter å ha endret ' manus '-delen og kompilering av hoved-HTML-filen, ser utdataene slik ut:
Utdataene viser at den spesifikke CSS-klassen har blitt erstattet med en annen klasse.
Metode 8: Verdi Eiendom
« verdi ” token list-egenskapen henter de nødvendige verdiene tilordnet det valgte HTML-elementet. Når den festes ved siden av ' klasseliste ”-egenskapen, hentes klassene som er tildelt de valgte elementene, som vist nedenfor:
< manus >funksjon handling ( ) {
la demoVal = dokument. getElementById ( 'useCase' ) . klasseliste . verdi ;
dokument. getElementById ( 'skrive ut' ) . indreHTML = demoVal ;
}
manus >
Beskrivelse av kodebiten ovenfor:
- Inne i ' handling ()» funksjonstekst, « verdi ' eiendommen er festet ved siden av ' klasseliste ” egenskap for å hente alle tildelte klasser av de valgte HTML-elementene.
- Deretter blir resultatet av egenskapen ovenfor lagret i en variabel ' demoVal ” og satt inn over elementet som har en id på “print”.
Etter slutten av kompileringsfasen genereres utdataene på en nettside som følger:
Utdataene viser navnet på CSS-klasser som brukes over det valgte elementet.
Konklusjon
HTML DOM TokenList-objektet er som en matrise som lagrer flere metoder og egenskaper som brukes til å bruke spesifikk funksjonalitet over det angitte HTML-elementet. Noen av de viktigste og mest brukte metodene levert av TokenList er ' add()”, “remove()”, “toggle()”, “contains()”, “item()”, og “replace() '. Egenskapene som leveres av TokenList er ' lengde ' og ' verdi '. Denne artikkelen har forklart prosedyren for å arbeide med JavaScript HTML DOMTokenList-objektet.