DOM “ TokenList ” sadrži mnogo svojstava ili metoda kojima krajnji korisnik može pristupiti prema svojim zahtjevima. Svojstva i metode koje pruža ovaj popis izvode specifične operacije nad navedenim skupovima podataka i vraćaju rezultat u skladu s tim. Više je poput niza jer ima različite članove koji se mogu odabrati prema njihovom indeksu, a baš kao i niz, prvi indeks je ' 0 ”. Ali ne možete koristiti metode poput ' pop()”, “push()” ili “join() ”.
Ovaj će blog objasniti rad HTML DOMTokenList objekata pomoću JavaScripta.
Kako raditi s JavaScript HTML DOMTokenList objektima?
HTML DOMTokenList nije ništa sam po sebi i njegova vrijednost je samo zbog svojstava i metoda koje se nalaze u njemu. Pogledajmo detaljno ova svojstva i metode zajedno s pravilnom implementacijom.
Metoda 1: Metoda Add().
' Dodati ()” pridružuje ili dodjeljuje nove klase, svojstva ili jednostavne tokene odabranom elementu. Njegova sintaksa je navedena u nastavku:
htmlElement. dodati ( oneOrMoreToken )
Njegova implementacija se izvodi kroz sljedeći kod:
< glava >
< stil >
.veličina fonta{
veličina slova: velika;
}
.boja{
boja pozadine: kadetplava;
boja: whitesmoke;
}
< / stil >
< / glava >
< tijelo >
< h1 stil = 'boja: kadetplava;' > Linux < / h1 >
< dugme na klik = 'akcijski()' > Guja < / dugme >
< str > Pritisnite gornju tipku za primjenu stila < / str >
< div iskaznica = 'odabran' >
< str > Ja sam odabrani tekst. < / str >
< / div >
< skripta >
funkcija akcija() {
document.getElementById('odabrano').classList.add('veličina fonta', 'boja');
}
< / skripta >
< / tijelo >
Objašnjenje gornjeg koda je sljedeće:
- Prvo odaberite dvije CSS klase ' veličina fonta ' i 'boja' i dodijelite im nasumična CSS svojstva poput ' font-size”, “background-color” i “color ”.
- Zatim stvorite gumbe koristeći '< dugme >' oznaku koja poziva ' akcijski ()' pomoću funkcije ' na klik ” slušatelj događaja.
- Osim toga, stvorite roditelj ' div ' element i dodijelite mu ID od ' odabran ” i umetnite lažne podatke unutar njega.
- Nakon toga definirajte ' akcijski ()” i pohraniti referencu odabranog elementa pristupom njegovom jedinstvenom ID-u.
- Na kraju upotrijebite ' classList ” svojstvo za dodjelu klasa i prilaganje “ dodati ()” metoda. Zatim proslijedite CSS klase unutar ove zagrade metode i ona će primijeniti te klase na odabrani element.
Izlaz nakon kompilacije gornjeg koda generira se kao:
Gornji gif potvrđuje da su CSS klase dodijeljene odabranom elementu putem ' dodati ()” metoda.
Metoda 2: Metoda Remove().
Ova metoda uklanja određenu klasu ili ID iz jednog ili više odabranih elemenata kao što je učinjeno u donjem kodu:
< glava >< stil >
.veličina fonta {
font- veličina : velika;
}
. boja {
pozadina- boja : kadetskoplava;
boja : bijeli dim;
}
< / stil >
< / glava >
< tijelo >
< h1 stil = 'boja: kadetplava;' > Linuxhint < / h1 >
< dugme na klik = 'akcijski()' >Zbrajalo< / dugme >
< str >Pritisnite gornji gumb za primjenu stila< / str >
< div iskaznica = 'odabran' razreda = 'boja veličine fonta' >
< str >Jesam Odabran Tekst .< / str >
< / div >
< skripta >
funkcija akcijski ( ) {
document.getElementById ( 'odabran' ) .classList.remove ( 'boja' ) ;
}
< / skripta >
< / tijelo >
Opis gornjeg koda je sljedeći:
- U početku se ovdje kao primjer koristi kod objašnjen u gornjem kodu.
- Ovdje, oba ' boja ' i ' veličina fonta ” klase se izravno dodjeljuju odabranom elementu.
- Nakon toga, unutar ' akcijski ()' funkcija koju poziva ' na klik ” slušatelj događaja “ ukloniti ()” koristi se metoda tokena.
- Ova metoda uzima jednu ili više klasa koje će biti uklonjene iz odabranog elementa. U našem slučaju, ' boja ” klasa će biti uklonjena iz odabranog HTML elementa.
Izlaz za gornji kod prikazan je kao:
Gornji izlaz pokazuje da je određena CSS klasa uklonjena iz odabranog elementa pomoću metode 'remove()'.
Metoda 3: Metoda Toggle().
' prebaciti ()' metoda je kombinacija oba ' dodati ()” i “ ukloniti ()” metode. Prvo dodjeljuje dostavljenu CSS klasu odabranom HTML elementu, a zatim je uklanja u skladu s radnjama korisnika.
< html >< glava >
< stil >
.veličina fonta {
font- veličina : xx-veliki;
}
. boja {
pozadina- boja : kadetskoplava;
boja : bijeli dim;
}
< / stil >
< / glava >
< tijelo >
< h1 stil = 'boja: kadetplava;' > Linuxhint < / h1 >
< dugme na klik = 'akcijski()' >Zbrajalo< / dugme >
< str >Pritisnite gornji gumb za primjenu stila< / str >
< div iskaznica = 'odabran' >
< str >Jesam Odabran Tekst .< / str >
< / div >
< skripta >
funkcija akcijski ( ) {
document.getElementById ( 'odabran' ) .classList.toggle ( 'veličina fonta' ) ;
}
< / skripta >
< / tijelo >
< / html >
Opis gornjeg koda naveden je u nastavku:
- Koristi se isti program kao u gornjem odjeljku, samo ' prebaciti ()' metoda zamjenjuje se s ' ukloniti ()” metoda.
Na kraju faze kompilacije, izlaz će biti sljedeći:
Izlaz pokazuje da se određena CSS klasa dodaje i uklanja u skladu s radnjom korisnika.
Metoda 4: Metoda Contains().
' sadrži ()” metoda koristi se za provjeru dostupnosti određenih CSS klasa preko HTML elementa, a njezina implementacija navedena je u nastavku:
< skripta >funkcija akcijski ( ) {
neka x = dokument. getElementById ( 'odabran' ) . classList . sadrži ( 'veličina fonta' ) ;
dokument. getElementById ( 'test' ) . unutarnjiHTML = x ;
}
skripta >
HTML i CSS dio ostaju isti. Samo u “< skripta >”, metoda “contains()” primjenjuje se na odabrani element kako bi se provjerilo je li “ veličina fonta ” primjenjuje se na taj element ili ne. Zatim se rezultat prikazuje na web stranici u HTML elementu koji ima id ' test ”.
Nakon kompilacije gornjeg koda, web stranica izgleda ovako:
Izlaz pokazuje da vrijednost ' pravi ” vraća se što znači da se određena CSS klasa primjenjuje na odabrani HTML element.
Metoda 5: Metoda Item().
' artikal ()' odabire token ili CSS klasu prema njihovom indeksnom broju, počevši od ' 0 ', kako je prikazano dolje:
< tijelo >< h1 stil = 'boja: kadetplava;' > Linux h1 >
< gumb na klik = 'akcijski()' > Dama dugme >
< str > CSS razreda koja je dodijeljena na prvu , biva dohvaćen : str >
< h3 id = 'upotreba' razreda = 'prviCls drugiCls trećiCls' > h3 >
< skripta >
funkcija akcijski ( ) {
neka demoList = dokument. getElementById ( 'upotreba' ) . classList . artikal ( 0 ) ;
dokument. getElementById ( 'upotreba' ) . unutarnjiHTML = demoList ;
}
skripta >
tijelo >
Objašnjenje gornjeg koda:
- Prvo, višestruke CSS klase dodijeljene su našem odabranom elementu s ID-om ' slučaj upotrebe ' i metoda 'action()' koja se poziva putem ' na klik ” događaj.
- U ovoj funkciji, ' artikal ()” metoda s indeksom “ 0 ” pridružuje se odabranom elementu. Rezultat se pohranjuje u varijablu ' demoList ' koji se zatim ispisuje preko web stranice pomoću ' unutarnjiHTML ” vlasništvo.
Nakon završetka kompilacije, izlaz je ovakav:
Izlaz prikazuje naziv CSS klase koji se prvo primjenjuje na odabrani element i biva dohvaćen.
Metoda 6: svojstvo duljine
' duljina ” svojstvo tokenList vraća broj elemenata ili dodijeljenih klasa koje se primjenjuju na odabrani element. Proces implementacije naveden je u nastavku:
< skripta >funkcija akcijski ( ) {
neka ruše = dokument. getElementById ( 'upotreba' ) . classList . duljina ;
dokument. getElementById ( 'upotreba' ) . unutarnjiHTML = rušiti ;
}
skripta >
U gornjem bloku koda:
- Prvo ' duljina ” svojstvo je priloženo „ classList ” za dohvaćanje broja klasa koje su dodijeljene odabranom elementu.
- Zatim se rezultat svojstva pohranjuje u varijablu ' rušiti ' koji će biti prikazan preko web stranice na elementu s ID-om ' slučaj upotrebe ”.
- Ostatak koda ostaje isti kao u gornjem odjeljku.
Generirani izlaz nakon kompilacije naveden je u nastavku:
Izlaz vraća primijenjene klase nad elementom.
Metoda 7: Metoda Replace().
' zamijeniti ()” metoda je ona koja uzima najmanje dva parametra i zamjenjuje prvi parametar drugim parametrom za odabrani element, kao što je prikazano u nastavku:
< skripta >funkcija akcijski ( ) {
neka demoList = dokument. getElementById ( 'upotreba' ) . classList . zamijeniti ( 'veličina fonta' , 'boja' ) ;
}
skripta >
Ovdje, CSS ' veličina fonta ' klasa je zamijenjena sa CSS ' boja ' klasa za element s ID-om ' slučaj upotrebe ”. Ostatak HTML i CSS koda ostaje isti kao u gornjim odjeljcima.
Nakon izmjene ' skripta ” i sastavljanja glavne HTML datoteke, izlaz izgleda ovako:
Izlaz pokazuje da je određena CSS klasa zamijenjena drugom klasom.
Metoda 8: Svojstvo vrijednosti
' vrijednost ” svojstvo popisa tokena dohvaća potrebne vrijednosti dodijeljene odabranom HTML elementu. Kada se pričvrsti pored ' classList ”, dohvaćaju se klase dodijeljene odabranim elementima, kao što je prikazano u nastavku:
< skripta >funkcija akcijski ( ) {
neka demoVal = dokument. getElementById ( 'upotreba' ) . classList . vrijednost ;
dokument. getElementById ( 'ispisati' ) . unutarnjiHTML = demoVal ;
}
skripta >
Opis gore navedenog isječka koda:
- Unutar ' akcijski ()” tijelo funkcije, “ vrijednost ' svojstvo je priloženo pored ' classList ” za dohvaćanje svih dodijeljenih klasa odabranih HTML elemenata.
- Zatim se rezultat gornjeg svojstva pohranjuje u varijablu ' demoVal ” i umetnuti preko elementa koji ima ID „print”.
Nakon završetka faze kompilacije, izlaz na web stranici generira se na sljedeći način:
Izlaz prikazuje naziv CSS klasa koje se primjenjuju na odabrani element.
Zaključak
Objekt HTML DOM TokenList je poput niza koji pohranjuje više metoda i svojstava koja se koriste za primjenu određene funkcije na navedeni HTML element. Neke od najvažnijih i najčešće korištenih metoda koje nudi TokenList su ' add()”, “remove()”, “toggle()”, “contains()”, “item()” i “replace() ”. Svojstva koja pruža TokenList su ' duljina ' i ' vrijednost ”. Ovaj je članak objasnio postupak rada s JavaScript HTML DOMTokenList objektom.