DOM' TokenList ” sisaldab palju atribuute või meetodeid, millele lõppkasutaja vastavalt oma nõudmistele juurde pääseb. Selles loendis pakutavad atribuudid ja meetodid teostavad konkreetseid toiminguid antud andmehulkadega ja tagastavad tulemuse vastavalt. See on rohkem nagu massiiv, kuna sellel on erinevad liikmed, mida saab valida nende indeksi järgi ja täpselt nagu massiiv, on esimene indeks ' 0 ”. Kuid te ei saa kasutada selliseid meetodeid nagu ' pop()”, „push()” või „liitu() ”.
See ajaveeb selgitab HTML DOMTokenList objektide tööd JavaScripti abil.
Kuidas töötada JavaScripti HTML DOMTokenList objektidega?
HTML DOMTokenList pole iseenesest midagi ja selle väärtus tuleneb lihtsalt selles sisalduvatest omadustest ja meetoditest. Vaatame neid omadusi ja meetodeid üksikasjalikult koos õige rakendamisega.
1. meetod: Add() meetod
' Lisama ()” lisab või määrab valitud elemendiga uued klassid, omadused või lihtsad märgid. Selle süntaks on toodud allpool:
htmlElement. lisama ( oneOrMoreToken )
Selle rakendamine toimub järgmise koodi kaudu:
< pea >
< stiilis >
.fontSize{
fondi suurus: suur;
}
.color{
taustavärv: kadetsinine;
värvus: valge suitsu;
}
< / stiilis >
< / pea >
< keha >
< h1 stiilis = 'värv: kadetsinine;' > Linux < / h1 >
< nuppu onclick = 'tegevus()' > Lisaja < / nuppu >
< lk > Stiili rakendamiseks vajutage ülaltoodud nuppu < / lk >
< div id = 'valitud' >
< lk > Olen valitud tekst. < / lk >
< / div >
< stsenaarium >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / stsenaarium >
< / keha >
Ülaltoodud koodi selgitus on järgmine:
- Esmalt valige kaks CSS-klassi ' fondi suurus ' ja 'color' ning määrake neile juhuslikud CSS-i atribuudid nagu ' font-size”, “background-color” ja “color ”.
- Järgmisena looge nupud '< nuppu >' silt, mis kutsub esile ' tegevust ()' funktsiooni kasutades ' onclick ” sündmuste kuulaja.
- Lisaks looge vanem ' div ' element ja määrake sellele ID valitud ” ja sisestage selle sisse näivad andmed.
- Pärast seda määrake ' tegevust ()” funktsiooni ja salvestage valitud elemendi viide, pääsedes juurde selle kordumatule ID-le.
- Lõpuks kasutage ' klassiloend ' atribuut, et määrata klassid ja lisada ' lisama ()” meetodil. Seejärel edastage CSS-klassid selle meetodi sulgudes ja see rakendab need klassid valitud elemendile.
Pärast ülaltoodud koodi koostamist genereeritakse väljund järgmiselt:
Ülaltoodud gif kinnitab, et CSS-i klassid on määratud elemendile ' lisama ()” meetodil.
2. meetod: Eemalda() meetod
See meetod eemaldab konkreetse klassi või ID ühest või mitmest valitud elemendist, nagu on tehtud allolevas koodis:
< pea >< stiilis >
.fontSize {
font- suurus : suur;
}
. värvi {
taust- värvi : cadetblue;
värvi : valge suits;
}
< / stiilis >
< / pea >
< keha >
< h1 stiilis = 'värv: kadetsinine;' > Linuxi vihje < / h1 >
< nuppu onclick = 'tegevus()' >Lisaja< / nuppu >
< lk >Stiili rakendamiseks vajutage ülaltoodud nuppu / lk >
< div id = 'valitud' klass = 'fondi suuruse värv' >
< lk > olen Valitud Tekst .< / lk >
< / div >
< stsenaarium >
funktsiooni tegevust ( ) {
document.getElementById ( 'valitud' ) .classList.remove ( 'värv' ) ;
}
< / stsenaarium >
< / keha >
Ülaltoodud koodi kirjeldus on järgmine:
- Esialgu kasutatakse siin näitena ülaltoodud koodis selgitatud koodi.
- Siin on mõlemad ' värvi ” ja „ fondi suurus ” klassid määratakse otse valitud elemendile.
- Pärast seda, sees ' tegevust ()' funktsioon, mille kutsub esile ' onclick ' sündmuste kuulaja ' eemaldada ()” märgimeetodit.
- See meetod võtab ühe või mitu klassi, mis eemaldatakse valitud elemendist. Meie puhul on ' värvi ” klass eemaldatakse valitud HTML-elemendist.
Ülaltoodud koodi väljund kuvatakse järgmiselt:
Ülaltoodud väljund näitab, et konkreetne CSS-klass on valitud elemendist eemaldatud, kasutades meetodit “remove()”.
3. meetod: Toggle() meetod
' lüliti ()” meetod on kombinatsioon mõlemast lisama ()' ja ' eemaldada ()” meetodid. Esmalt määrab see valitud HTML-i elemendile pakutava CSS-klassi ja seejärel eemaldab selle vastavalt kasutaja tegevusele.
< html >< pea >
< stiilis >
.fontSize {
font- suurus : xx-suur;
}
. värvi {
taust- värvi : cadetblue;
värvi : valge suits;
}
< / stiilis >
< / pea >
< keha >
< h1 stiilis = 'värv: kadetsinine;' > Linuxi vihje < / h1 >
< nuppu onclick = 'tegevus()' >Lisaja< / nuppu >
< lk >Stiili rakendamiseks vajutage ülaltoodud nuppu / lk >
< div id = 'valitud' >
< lk > olen Valitud Tekst .< / lk >
< / div >
< stsenaarium >
funktsiooni tegevust ( ) {
document.getElementById ( 'valitud' ) .classList.toggle ( 'fondi suurus' ) ;
}
< / stsenaarium >
< / keha >
< / html >
Ülaltoodud koodi kirjeldus on toodud allpool:
- Kasutatakse sama programmi nagu ülaltoodud jaotises, ainult ' lüliti ()” meetod asendatakse sõnadega „ eemaldada ()” meetodil.
Koostamisetapi lõpus on väljund järgmine:
Väljund näitab, et konkreetne CSS-klass lisatakse ja eemaldatakse vastavalt kasutaja tegevusele.
4. meetod: Sisaldab() meetodit
' sisaldab ()” meetodit kasutatakse konkreetsete CSS-klasside saadavuse kontrollimiseks HTML-elemendi kaudu ja selle rakendamine on toodud allpool:
< stsenaarium >funktsiooni tegevust ( ) {
las x = dokument. getElementById ( 'valitud' ) . klassiloend . sisaldab ( 'fondi suurus' ) ;
dokument. getElementById ( 'test' ) . sisemine HTML = x ;
}
stsenaarium >
HTML-i ja CSS-i osa jääb samaks. Ainult jaotises „< stsenaarium >”, rakendatakse valitud elemendile meetodit „contains()”, et kontrollida, kas „ fondi suurus ” on sellele elemendile rakendatud või mitte. Seejärel kuvatakse tulemus veebilehel HTML-i elemendil, millel on ID ' test ”.
Pärast ülaltoodud koodi koostamist näeb veebileht välja selline:
Väljund näitab, et väärtus ' tõsi ” tagastatakse, mis tähendab, et valitud HTML-elemendile rakendatakse konkreetset CSS-klassi.
5. meetod: üksuse() meetod
' üksus ()' meetod valib märgi või CSS-klassi vastavalt nende indeksinumbrile, alustades ' 0 ', nagu allpool näidatud:
< keha >< h1 stiilis = 'värv: kadetsinine;' > Linux h1 >
< nupp onclick = 'tegevus()' > Kontrollija nuppu >
< lk > CSS klass mis on alguses määratud , saab kätte : lk >
< h3 id = 'useCase' klass = 'firstCls secondCls thirdCls' > h3 >
< stsenaarium >
funktsiooni tegevust ( ) {
lase demoList = dokument. getElementById ( 'useCase' ) . klassiloend . üksus ( 0 ) ;
dokument. getElementById ( 'useCase' ) . sisemine HTML = demoList ;
}
stsenaarium >
keha >
Ülaltoodud koodi selgitus:
- Esiteks määratakse meie valitud elemendile mitu CSS-klassi ID-ga ' useCase ' ja meetod 'action()', mis käivitatakse '' kaudu onclick ” sündmus.
- Selles funktsioonis on ' üksus ()' meetod indeksiga ' 0 ” kinnitub valitud elemendi külge. Tulemus salvestatakse muutujasse ' demoList ', mis seejärel prinditakse veebilehele, kasutades ' sisemine HTML ” vara.
Pärast kompileerimise lõppu on väljund järgmine:
Väljund näitab CSS-klassi nime, mis rakendub alguses valitud elemendile ja laaditakse alla.
6. meetod: pikkus Omadus
' pikkus TokenListi atribuut ” tagastab elementide või määratud klasside arvu, mida valitud elemendile rakendatakse. Rakendusprotsess on kirjeldatud allpool:
< stsenaarium >funktsiooni tegevust ( ) {
las nad lammutavad = dokument. getElementById ( 'useCase' ) . klassiloend . pikkus ;
dokument. getElementById ( 'useCase' ) . sisemine HTML = lammutada ;
}
stsenaarium >
Ülaltoodud koodiplokis:
- Esiteks ' pikkus ' vara on lisatud ' klassiloend ” atribuut, et tuua välja valitud elemendile määratud klasside arv.
- Järgmisena salvestatakse atribuudi tulemus muutujasse ' lammutada ', mis kuvatakse veebilehe kohal elemendil, mille ID on ' useCase ”.
- Ülejäänud kood jääb samaks, mis ülaltoodud jaotises.
Pärast koostamist genereeritud väljund on toodud allpool:
Väljund tagastab elemendi kohal rakendatud klassid.
7. meetod: Asenda() meetod
' asendada ()” on meetod, mis võtab vähemalt kaks parameetrit ja asendab valitud elemendi esimese parameetri teise parameetriga, nagu allpool näidatud:
< stsenaarium >funktsiooni tegevust ( ) {
lase demoList = dokument. getElementById ( 'useCase' ) . klassiloend . asendada ( 'fondi suurus' , 'värv' ) ;
}
stsenaarium >
Siin on CSS ' fondi suurus 'klass asendatakse CSS-iga' värvi ' klass elemendile, mille ID on ' useCase ”. Ülejäänud HTML- ja CSS-kood jääb samaks, mis ülaltoodud jaotistes.
Pärast ' stsenaarium ” osa ja kompileerides peamise HTML-faili, näeb väljund välja selline:
Väljund näitab, et konkreetne CSS-klass on asendatud teise klassiga.
8. meetod: väärtuse omadus
' väärtus ” märgiloendi atribuut hangib valitud HTML-i elemendile määratud vajalikud väärtused. Kui see kinnitatakse ' klassiloend ” atribuut, hangitakse valitud elementidele määratud klassid, nagu allpool näidatud:
< stsenaarium >funktsiooni tegevust ( ) {
las demoVal = dokument. getElementById ( 'useCase' ) . klassiloend . väärtus ;
dokument. getElementById ( 'printida' ) . sisemine HTML = demoVal ;
}
stsenaarium >
Ülalmainitud koodilõigu kirjeldus:
- Sees ' tegevust ()' funktsiooni keha, ' väärtus ' kinnisvara on lisatud ' kõrval klassiloend ” atribuut valitud HTML-elementide kõigi määratud klasside toomiseks.
- Järgmisena salvestatakse ülaltoodud atribuudi tulemus muutujasse ' demoVal ” ja sisestatakse elemendi kohale, mille ID on „print”.
Pärast kompileerimisfaasi lõppu genereeritakse veebilehe väljund järgmiselt:
Väljund näitab valitud elemendile rakendatavate CSS-klasside nimesid.
Järeldus
HTML DOM TokenList objekt on nagu massiiv, mis salvestab mitu meetodit ja atribuuti, mida kasutatakse konkreetsete funktsioonide rakendamiseks pakutud HTML-elemendile. Mõned TokenListi pakutavad kõige olulisemad ja laialdasemalt kasutatavad meetodid on ' add ()', 'eemalda ()', 'toggle()', 'contains()', 'item ()' ja 'replace () ”. TokenListi pakutavad omadused on ' pikkus ” ja „ väärtus ”. Selles artiklis on selgitatud JavaScripti HTML-i DOMTokenList objektiga töötamise protseduuri.