Ang DOM ' TokenList ” ay naglalaman ng maraming katangian o pamamaraan na maaaring ma-access ng end-user ayon sa kanilang mga kinakailangan. Ang mga katangian at pamamaraan na ibinigay ng listahang ito ay nagsasagawa ng mga partikular na operasyon sa mga ibinigay na set ng data at ibinabalik ang resulta nang naaayon. Ito ay mas katulad ng isang array dahil mayroon itong iba't ibang mga miyembro na maaaring mapili ng kanilang index at tulad ng isang array ang unang index ay ' 0 ”. Ngunit hindi ka maaaring gumamit ng mga pamamaraan tulad ng ' pop()”, “push()” o “join() ”.
Ipapaliwanag ng blog na ito ang paggawa ng HTML DOMTokenList Objects sa pamamagitan ng JavaScript.
Paano Magtrabaho Sa JavaScript HTML DOMTokenList Objects?
Ang HTML DOMTokenList ay wala sa sarili nito at ang halaga nito ay dahil lamang sa mga katangian at pamamaraan na naninirahan dito. Bisitahin natin ang mga katangian at pamamaraang ito nang detalyado kasama ng wastong pagpapatupad.
Paraan 1: Add() Method
Ang ' Idagdag ()” ay nag-a-attach o nagtatalaga ng mga bagong klase, katangian, o simpleng mga token na may napiling elemento. Ang syntax nito ay nakasaad sa ibaba:
htmlElemento. idagdag ( oneOrMoreToken )
Ang pagpapatupad nito ay isinasagawa sa pamamagitan ng sumusunod na code:
< ulo >
< istilo >
.fontSize{
laki ng font: malaki;
}
.kulay{
kulay ng background: cadetblue;
kulay: whitesmoke;
}
< / istilo >
< / ulo >
< katawan >
< h1 istilo = 'kulay: cadetblue;' > Linux < / h1 >
< pindutan onclick = 'aksyon()' > Adder < / pindutan >
< p > Pindutin ang Button sa itaas para Ilapat ang Pag-istilo < / p >
< div id = 'pinili' >
< p > Ako ay Napiling Teksto. < / p >
< / div >
< iskrip >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / iskrip >
< / katawan >
Ang paliwanag ng code sa itaas ay ang mga sumusunod:
- Una, pumili ng dalawang klase ng CSS ' laki ng font ” at “kulay” at italaga sa kanila ang mga random na katangian ng CSS tulad ng “ laki ng font', 'kulay ng background' at 'kulay ”.
- Susunod, lumikha ng mga pindutan gamit ang '< pindutan >” tag na humihiling ng “ aksyon ()' function gamit ang ' onclick ” tagapakinig ng kaganapan.
- Bilang karagdagan, lumikha ng isang magulang ' div 'elemento at italaga ito ng isang id ng ' pinili ” at ipasok ang dummy data sa loob nito.
- Pagkatapos nito, tukuyin ang ' aksyon ()” function at iimbak ang reference ng napiling elemento sa pamamagitan ng pag-access sa natatanging id nito.
- Panghuli, gamitin ang ' Listahan ng klase ” property para italaga ang mga klase at ilakip ang “ idagdag ()” paraan. Pagkatapos, ipasa ang mga klase ng CSS sa loob ng pamamaraang ito na panaklong at ilalapat nito ang mga klase sa napiling elemento.
Ang output pagkatapos ng compilation ng code sa itaas ay nabuo bilang:
Kinukumpirma ng gif sa itaas na ang mga klase ng CSS ay itinalaga sa isang napiling elemento sa pamamagitan ng “ idagdag ()” paraan.
Paraan 2: Alisin() Paraan
Ang pamamaraang ito ay nag-aalis ng partikular na klase o id mula sa isa o higit pang mga napiling elemento tulad ng ginawa sa ibaba ng code:
< ulo >< istilo >
.fontSize {
font- laki : malaki;
}
. kulay {
background- kulay : kadeteblue;
kulay : puting usok;
}
< / istilo >
< / ulo >
< katawan >
< h1 istilo = 'kulay: cadetblue;' > Linuxhint < / h1 >
< pindutan onclick = 'aksyon()' >Adder< / pindutan >
< p >Pindutin ang Button sa itaas para Ilapat ang Pag-istilo< / p >
< div id = 'pinili' klase = 'kulay ng laki ng font' >
< p >Ako ay Napili Text .< / p >
< / div >
< iskrip >
function aksyon ( ) {
document.getElementById ( 'pinili' ) .classList.alisin ( 'kulay' ) ;
}
< / iskrip >
< / katawan >
Ang paglalarawan ng code sa itaas ay ang mga sumusunod:
- Sa una, ang code na ipinaliwanag sa itaas na code ay ginagamit dito bilang isang halimbawa.
- Dito, pareho ang ' kulay 'at' laki ng font Ang mga klase ay direktang itinalaga sa napiling elemento.
- Pagkatapos nito, sa loob ng ' aksyon ()' function na hinihingi ng ' onclick 'tagapakinig ng kaganapan ang' tanggalin ()” token method ang ginamit.
- Ang pamamaraang ito ay tumatagal ng isa o maraming klase na aalisin sa napiling elemento. Sa aming kaso, ang ' kulay Ang klase ng ” ay aalisin sa napiling elemento ng HTML.
Ang output para sa code sa itaas ay ipinapakita bilang:
Ang output sa itaas ay nagpapakita na ang partikular na klase ng CSS ay inalis mula sa napiling elemento gamit ang 'remove()' method.
Paraan 3: Paraan ng Toggle().
Ang ' magpalipat-lipat ()' na pamamaraan ay ang kumbinasyon ng parehong ' idagdag ()' at ' tanggalin ()' paraan. Una nitong itinatalaga ang ibinigay na klase ng CSS sa napiling elemento ng HTML at pagkatapos ay aalisin ito ayon sa mga aksyon ng user.
< html >< ulo >
< istilo >
.fontSize {
font- laki : xx-malaki;
}
. kulay {
background- kulay : kadeteblue;
kulay : puting usok;
}
< / istilo >
< / ulo >
< katawan >
< h1 istilo = 'kulay: cadetblue;' > Linuxhint < / h1 >
< pindutan onclick = 'aksyon()' >Adder< / pindutan >
< p >Pindutin ang Button sa itaas para Ilapat ang Pag-istilo< / p >
< div id = 'pinili' >
< p >Ako ay Napili Text .< / p >
< / div >
< script >
function aksyon ( ) {
document.getElementById ( 'pinili' ) .classList.toggle ( 'Laki ng font' ) ;
}
< / script >
< / katawan >
< / html >
Ang isang paglalarawan ng code sa itaas ay nakasaad sa ibaba:
- Ang parehong programa ay ginagamit tulad ng ginamit sa itaas na seksyon, tanging ang ' magpalipat-lipat ()' na paraan ay pinalitan ng ' tanggalin ()” paraan.
Sa pagtatapos ng yugto ng compilation, ang output ay ang mga sumusunod:
Ipinapakita ng output na ang partikular na klase ng CSS ay idinaragdag at inaalis ayon sa pagkilos ng user.
Paraan 4: Naglalaman ng() Paraan
Ang ' naglalaman ng ()' na paraan ay ginagamit upang suriin ang pagkakaroon ng mga partikular na klase ng CSS sa HTML na elemento at ang pagpapatupad nito ay nakasaad sa ibaba:
< script >function aksyon ( ) {
hayaan mo x = dokumento. getElementById ( 'pinili' ) . Listahan ng klase . naglalaman ng ( 'Laki ng font' ) ;
dokumento. getElementById ( 'pagsusulit' ) . innerHTML = x ;
}
script >
Ang bahagi ng HTML at CSS ay nananatiling pareho. Sa “< script >', ang 'contains()' na paraan ay inilapat sa napiling elemento upang suriin kung ang ' laki ng font ” ay inilapat sa elementong iyon o hindi. Pagkatapos, ang resulta ay ipinapakita sa webpage sa isang elemento ng HTML na may id na ' pagsusulit ”.
Pagkatapos ng compilation ng code sa itaas, ang webpage ay lalabas na ganito:
Ang output ay nagpapakita na ang halaga ng ' totoo ” ay ibinalik na nangangahulugang ang partikular na klase ng CSS ay inilapat sa napiling elemento ng HTML.
Paraan 5: Paraan ng Item().
Ang ' aytem ()' na paraan ay pipili ng token o CSS class ayon sa kanilang index number, simula sa ' 0 ”, tulad ng ipinapakita sa ibaba:
< katawan >< estilo ng h1 = 'kulay: cadetblue;' > Linux h1 >
< button sa pag-click = 'aksyon()' > Checker pindutan >
< p > Ang CSS klase na itinalaga sa una , nakukuha : p >
< h3 id = 'useCase' klase = 'firstCls secondCls thirdCls' > h3 >
< script >
function aksyon ( ) {
hayaan ang demoList = dokumento. getElementById ( 'useCase' ) . Listahan ng klase . aytem ( 0 ) ;
dokumento. getElementById ( 'useCase' ) . innerHTML = demoList ;
}
script >
katawan >
Paliwanag ng code sa itaas:
- Una, maraming klase ng CSS ang itinalaga sa aming napiling elemento na may id na ' useCase ” at ang pamamaraang “action()” na hinihingi sa pamamagitan ng “ onclick ” kaganapan.
- Sa function na ito, ang ' aytem ()' na pamamaraan na may index ng ' 0 ” ay nakakabit sa napiling elemento. Ang resulta ay naiimbak sa variable na ' demoList ” na pagkatapos ay ipi-print sa webpage gamit ang “ innerHTML ” ari-arian.
Pagkatapos ng pagtatapos ng compilation, ang output ay ganito:
Ipinapakita ng output ang pangalan ng klase ng CSS na nalalapat sa una sa napiling elemento at nakukuha.
Paraan 6: haba Property
Ang ' haba Ibinabalik ng ” property ng tokenList ang bilang ng mga elemento o mga nakatalagang klase na inilapat sa napiling elemento. Ang proseso ng pagpapatupad ay nakasaad sa ibaba:
< script >function aksyon ( ) {
hayaan mo silang buwagin = dokumento. getElementById ( 'useCase' ) . Listahan ng klase . haba ;
dokumento. getElementById ( 'useCase' ) . innerHTML = gibain ;
}
script >
Sa itaas na bloke ng code:
- Una ang ' haba 'Ang ari-arian ay naka-attach sa ' Listahan ng klase ” property upang mabawi ang bilang ng mga klase na itinalaga sa napiling elemento.
- Susunod, ang resulta ng pag-aari ay maiimbak sa variable na ' gibain ” na ipapakita sa webpage sa isang elemento na may id ng “ useCase ”.
- Ang natitirang code ay nananatiling pareho sa seksyon sa itaas.
Ang nabuong output pagkatapos ng compilation ay nakasaad sa ibaba:
Ibinabalik ng output ang mga inilapat na klase sa elemento.
Paraan 7: Palitan() na Pamamaraan
Ang ' palitan ()' na pamamaraan ay isa na kumukuha ng hindi bababa sa dalawang parameter at pinapalitan ang unang parameter ng pangalawang parameter para sa napiling elemento, tulad ng ipinapakita sa ibaba:
< script >function aksyon ( ) {
hayaan ang demoList = dokumento. getElementById ( 'useCase' ) . Listahan ng klase . palitan ( 'Laki ng font' , 'kulay' ) ;
}
script >
Dito, ang CSS ' laki ng font Ang 'class ay pinalitan ng CSS' kulay 'class para sa isang elemento na may id ng ' useCase ”. Ang natitirang bahagi ng HTML at CSS code ay nananatiling pareho sa mga seksyon sa itaas.
Matapos baguhin ang ' script ” bahagi at pag-compile ng pangunahing HTML file, ang output ay ganito:
Ipinapakita ng output na ang partikular na klase ng CSS ay pinalitan ng isa pang klase.
Paraan 8: Value Property
Ang ' halaga ” kinukuha ng property ng listahan ng token ang mga kinakailangang halaga na itinalaga sa napiling elemento ng HTML. Kapag ito ay nakakabit sa tabi ng ' Listahan ng klase ” property, ang mga klase na nakatalaga sa mga napiling elemento ay makukuha, gaya ng ipinapakita sa ibaba:
< iskrip >function aksyon ( ) {
hayaan ang demoVal = dokumento. getElementById ( 'useCase' ) . Listahan ng klase . halaga ;
dokumento. getElementById ( 'print' ) . panloobHTML = demoVal ;
}
iskrip >
Paglalarawan ng nabanggit na snippet ng code:
- Sa loob ng ' aksyon ()' function body, ang ' halaga 'Ang ari-arian ay naka-attach sa tabi ng ' Listahan ng klase ” property upang mabawi ang lahat ng nakatalagang klase ng mga napiling elemento ng HTML.
- Susunod, ang resulta ng ari-arian sa itaas ay maiimbak sa isang variable na ' demoVal ” at inilagay sa ibabaw ng elementong mayroong id ng “print”.
Pagkatapos ng pagtatapos ng bahagi ng compilation, ang output sa isang webpage ay nabuo tulad ng sumusunod:
Ipinapakita ng output ang pangalan ng mga klase ng CSS na inilapat sa napiling elemento.
Konklusyon
Ang object ng HTML DOM TokenList ay parang array na nag-iimbak ng maraming pamamaraan at property na ginagamit para maglapat ng partikular na functionality sa ibinigay na HTML element. Ang ilan sa pinakamahalaga at malawakang ginagamit na pamamaraan na ibinigay ng TokenList ay “ add()”, “remove()”, “toggle()”, “contains()”, “item()”, at “replace() ”. Ang mga katangian na ibinibigay ng TokenList ay “ haba 'at' halaga ”. Ipinaliwanag ng artikulong ito ang pamamaraan upang gumana sa JavaScript HTML DOTokenList object.