DOM “ TokenList ” vsebuje veliko lastnosti ali metod, do katerih lahko dostopa končni uporabnik v skladu s svojimi zahtevami. Lastnosti in metode, ki jih ponuja ta seznam, izvajajo posebne operacije nad podanimi nizi podatkov in ustrezno vrnejo rezultat. Je bolj podobna matriki, ker ima različne člane, ki jih je mogoče izbrati po njihovem indeksu in tako kot matrika je prvi indeks ' 0 ”. Vendar ne morete uporabiti metod, kot je ' pop()', 'push()' ali 'join() ”.
Ta blog bo razložil delovanje HTML objektov DOMTokenList s pomočjo JavaScripta.
Kako delati s predmeti JavaScript HTML DOMTokenList?
HTML DOMTokenList ni nič sam po sebi in njegova vrednost je le posledica lastnosti in metod, ki so v njem. Oglejmo si te lastnosti in metode podrobno skupaj s pravilno implementacijo.
1. način: metoda Add().
' Dodaj ()« izbranemu elementu pripne ali dodeli nove razrede, lastnosti ali preproste žetone. Njegova sintaksa je navedena spodaj:
htmlElement. dodati ( oneOrMoreToken )
Njegova implementacija se izvaja z naslednjo kodo:
< glavo >
< stil >
.velikost pisave{
velikost pisave: velika;
}
.color{
barva ozadja: kadetsko modra;
barva: whitesmoke;
}
< / stil >
< / glavo >
< telo >
< h1 stil = 'barva: kadetsko modra;' > Linux < / h1 >
< gumb onclick = 'dejanje()' > Seštevalnik < / gumb >
< str > Pritisnite zgornji gumb, da uporabite slog < / str >
< div id = 'izbrano' >
< str > Jaz sem izbrano besedilo. < / str >
< / div >
< scenarij >
funkcija action() {
document.getElementById('izbrano').classList.add('Velikost pisave', 'barva');
}
< / scenarij >
< / telo >
Razlaga zgornje kode je naslednja:
- Najprej izberite dva razreda CSS ' velikost pisave « in »barva« ter jima dodelite naključne lastnosti CSS, kot je » velikost pisave«, »barva ozadja« in »barva ”.
- Nato ustvarite gumbe z uporabo »< gumb >«, ki prikliče » ukrepanje ()« s funkcijo » onclick ” poslušalec dogodkov.
- Poleg tega ustvarite nadrejenega ' div ' in mu dodelite ID ' izbrano « in vanjo vstavite navidezne podatke.
- Po tem določite » ukrepanje ()« in shrani referenco izbranega elementa z dostopom do njegovega edinstvenega ID-ja.
- Na koncu uporabite » classList ' za dodelitev razredov in pripenjanje ' dodati ()«. Nato posredujte razrede CSS znotraj tega oklepaja metode in te razrede bo uporabil za izbrani element.
Izhod po kompilaciji zgornje kode je ustvarjen kot:
Zgornji gif potrjuje, da so bili razredi CSS dodeljeni izbranemu elementu prek » dodati ()«.
2. način: metoda Remove().
Ta metoda odstrani določen razred ali ID iz enega ali več izbranih elementov, kot je storjeno v spodnji kodi:
< glavo >< stil >
.velikost pisave {
pisava- velikost : velik;
}
. barva {
ozadje- barva : kadetsko modra;
barva : bel dim;
}
< / stil >
< / glavo >
< telo >
< h1 stil = 'barva: kadetsko modra;' > Linuxhint < / h1 >
< gumb onclick = 'dejanje()' >Seštevalnik< / gumb >
< str >Pritisnite zgornji gumb za uporabo sloga< / str >
< div id = 'izbrano' razred = 'barva velikosti pisave' >
< str > Sem Izbrano Besedilo .< / str >
< / div >
< scenarij >
funkcijo ukrepanje ( ) {
document.getElementById ( 'izbrano' ) .classList.remove ( 'barva' ) ;
}
< / scenarij >
< / telo >
Opis zgornje kode je naslednji:
- Na začetku je tukaj kot primer uporabljena koda, razložena v zgornji kodi.
- Tukaj sta oba ' barva « in » velikost pisave ” so razredi neposredno dodeljeni izbranemu elementu.
- Po tem znotraj ' ukrepanje ()«, ki jo prikliče » onclick » poslušalec dogodkov » Odstrani ()« se uporablja metoda žetonov.
- Ta metoda vzame enega ali več razredov, ki bodo odstranjeni iz izbranega elementa. V našem primeru je ' barva ” bo odstranjen iz izbranega elementa HTML.
Izhod za zgornjo kodo je prikazan kot:
Zgornji izhod kaže, da je bil določen razred CSS odstranjen iz izbranega elementa z uporabo metode »remove()«.
3. način: Metoda Toggle().
' preklop ()« je kombinacija obeh » dodati ()' in ' Odstrani ()«. Najprej izbranemu elementu HTML dodeli ponujeni razred CSS in ga nato odstrani v skladu z dejanji uporabnika.
< html >< glavo >
< stil >
.velikost pisave {
pisava- velikost : xx-velik;
}
. barva {
ozadje- barva : kadetsko modra;
barva : bel dim;
}
< / stil >
< / glavo >
< telo >
< h1 stil = 'barva: kadetsko modra;' > Linuxhint < / h1 >
< gumb onclick = 'dejanje()' >Seštevalnik< / gumb >
< str >Pritisnite zgornji gumb za uporabo sloga< / str >
< div id = 'izbrano' >
< str > Sem Izbrano Besedilo .< / str >
< / div >
< scenarij >
funkcijo ukrepanje ( ) {
document.getElementById ( 'izbrano' ) .classList.toggle ( 'velikost pisave' ) ;
}
< / scenarij >
< / telo >
< / html >
Opis zgornje kode je naveden spodaj:
- Uporabljen je enak program kot v zgornjem razdelku, le » preklop ()« se nadomesti z metodo » Odstrani ()«.
Na koncu faze prevajanja bo rezultat naslednji:
Izhod kaže, da se določen razred CSS dodaja in odstranjuje v skladu z dejanjem uporabnika.
4. način: Metoda Contains().
' vsebuje ()« se uporablja za preverjanje razpoložljivosti določenih razredov CSS prek elementa HTML, njena izvedba pa je navedena spodaj:
< scenarij >funkcijo ukrepanje ( ) {
naj x = dokument. getElementById ( 'izbrano' ) . classList . vsebuje ( 'velikost pisave' ) ;
dokument. getElementById ( 'test' ) . notranjiHTML = x ;
}
scenarij >
Del HTML in CSS ostaja enak. Samo v »< scenarij >« se metoda »contains()« uporabi nad izbranim elementom, da preveri, ali je » velikost pisave ” uporabljen za ta element ali ne. Nato je rezultat prikazan na spletni strani v elementu HTML z ID-jem ' test ”.
Po sestavljanju zgornje kode je spletna stran videti takole:
Izhod pokaže, da je vrednost ' prav « je vrnjen, kar pomeni, da je določen razred CSS uporabljen nad izbranim elementom HTML.
Metoda 5: Metoda Item().
' postavka ()« izbere žeton ali razred CSS glede na njihovo indeksno številko, začenši z » 0 «, kot je prikazano spodaj:
< telo >< h1 stil = 'barva: kadetsko modra;' > Linux h1 >
< gumb na klik = 'dejanje()' > Checker gumb >
< str > CSS razred ki je najprej dodeljena , se pridobi : str >
< h3 id = 'primer uporabe' razred = 'firstCls secondCls thirdCls' > h3 >
< scenarij >
funkcijo ukrepanje ( ) {
naj demoList = dokument. getElementById ( 'primer uporabe' ) . classList . postavka ( 0 ) ;
dokument. getElementById ( 'primer uporabe' ) . notranjiHTML = demoList ;
}
scenarij >
telo >
Razlaga zgornje kode:
- Prvič, več razredov CSS je dodeljenih našemu izbranemu elementu z ID-jem ' useCase « in metoda »action()«, ki se prikliče prek » onclick ” dogodek.
- V tej funkciji je » postavka ()' metoda z indeksom ' 0 ” se pripne izbranemu elementu. Rezultat se shrani v spremenljivko ' demoList «, ki se nato natisne čez spletno stran z uporabo » notranjiHTML ” lastnina.
Po koncu prevajanja je rezultat takšen:
Izhod prikazuje ime razreda CSS, ki se najprej uporabi nad izbranim elementom in se pridobi.
6. način: lastnost dolžine
' dolžina ” lastnosti tokenList vrne število elementov ali dodeljenih razredov, ki so uporabljeni nad izbranim elementom. Postopek izvajanja je naveden spodaj:
< scenarij >funkcijo ukrepanje ( ) {
naj rušijo = dokument. getElementById ( 'primer uporabe' ) . classList . dolžina ;
dokument. getElementById ( 'primer uporabe' ) . notranjiHTML = uničiti ;
}
scenarij >
V zgornjem kodnem bloku:
- Najprej ' dolžina Lastnost je priložena » classList ” za pridobitev števila razredov, ki so dodeljeni izbranemu elementu.
- Nato se rezultat lastnosti shrani v spremenljivko ' uničiti «, ki bo prikazan na spletni strani v elementu z ID-jem » useCase ”.
- Preostali del kode ostaja enak kot v zgornjem razdelku.
Ustvarjen rezultat po prevajanju je naveden spodaj:
Izhod vrne uporabljene razrede nad elementom.
Metoda 7: Metoda Replace().
' zamenjati ()« je metoda, ki vzame vsaj dva parametra in nadomesti prvi parameter z drugim parametrom za izbrani element, kot je prikazano spodaj:
< scenarij >funkcijo ukrepanje ( ) {
naj demoList = dokument. getElementById ( 'primer uporabe' ) . classList . zamenjati ( 'velikost pisave' , 'barva' ) ;
}
scenarij >
Tukaj je CSS ' velikost pisave »razred je nadomeščen s CSS« barva ' za element z ID-jem ' useCase ”. Preostala koda HTML in CSS ostaja enaka kot v zgornjih razdelkih.
Po spremembi » scenarij ” in prevajanju glavne datoteke HTML, je rezultat videti takole:
Izhod pokaže, da je bil določen razred CSS nadomeščen z drugim razredom.
8. način: Lastnost vrednosti
' vrednost ” lastnost seznama žetonov pridobi zahtevane vrednosti, dodeljene izbranemu elementu HTML. Ko je pritrjen poleg ' classList ”, se pridobijo razredi, dodeljeni izbranim elementom, kot je prikazano spodaj:
< scenarij >funkcijo ukrepanje ( ) {
naj demoVal = dokument. getElementById ( 'primer uporabe' ) . classList . vrednost ;
dokument. getElementById ( 'tisk' ) . notranjiHTML = demoVal ;
}
scenarij >
Opis zgoraj navedenega delčka kode:
- Znotraj ' ukrepanje ()« funkcijsko telo, » vrednost Lastnost ' je priložena poleg ' classList ” za pridobitev vseh dodeljenih razredov izbranih elementov HTML.
- Nato se rezultat zgornje lastnosti shrani v spremenljivko ' demoVal « in vstavljen čez element z ID-jem »print«.
Po koncu faze prevajanja se izhod na spletni strani ustvari na naslednji način:
Izhod prikazuje ime razredov CSS, ki se uporabljajo nad izbranim elementom.
Zaključek
Objekt HTML DOM TokenList je kot matrika, ki shranjuje več metod in lastnosti, ki se uporabljajo za uporabo določene funkcionalnosti nad podanim elementom HTML. Nekatere najpomembnejše in najpogosteje uporabljene metode, ki jih ponuja TokenList, so ' add()”, “remove()”, “toggle()”, “contains()”, “item()” in “replace() ”. Lastnosti, ki jih ponuja TokenList, so ' dolžina « in » vrednost ”. V tem članku je razložen postopek za delo z objektom JavaScript HTML DOMTokenList.