DOM ' TokenList ” satur daudz rekvizītu vai metožu, kuriem galalietotājs var piekļūt atbilstoši savām prasībām. Šajā sarakstā sniegtie rekvizīti un metodes veic noteiktas darbības ar sniegtajām datu kopām un attiecīgi atgriež rezultātu. Tas ir vairāk kā masīvs, jo tajā ir dažādi dalībnieki, kurus var atlasīt pēc to indeksa, un tāpat kā masīvs pirmais indekss ir ' 0 ”. Bet jūs nevarat izmantot tādas metodes kā ' pop()”, “push()” vai “join() ”.
Šis emuārs izskaidros HTML DOMTokenList objektu darbību, izmantojot JavaScript.
Kā strādāt ar JavaScript HTML DOMTokenList objektiem?
HTML DOMTokenList pats par sevi nav nekas, un tā vērtība ir saistīta tikai ar tajā esošajām īpašībām un metodēm. Sīkāk apskatīsim šīs īpašības un metodes, kā arī pareizu ieviešanu.
1. metode: Add() metode
' Pievienot ()” pievieno vai piešķir jaunas klases, rekvizītus vai vienkāršus marķierus ar atlasīto elementu. Tās sintakse ir norādīta zemāk:
htmlElement. pievienot ( oneOrMoreToken )
Tās ieviešana tiek veikta, izmantojot šādu kodu:
< galvu >
< stils >
.fonta izmērs{
fonta izmērs: liels;
}
.color{
fona krāsa: kadetzils;
krāsa: whitesmoke;
}
< / stils >
< / galvu >
< ķermeni >
< h1 stils = 'krāsa: kadetzila;' > Linux < / h1 >
< pogu onclick = 'darbība ()' > Papildinātājs < / pogu >
< lpp > Nospiediet augšējo pogu, lai lietotu stilu < / lpp >
< div id = 'izvēlēts' >
< lpp > Esmu Izvēlētais teksts. < / lpp >
< / div >
< skripts >
funkcija darbība() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / skripts >
< / ķermeni >
Iepriekš minētā koda skaidrojums ir šāds:
- Vispirms atlasiet divas CSS klases ' fonta izmērs ' un 'color' un piešķiriet tiem nejaušus CSS rekvizītus, piemēram, ' fonta izmērs”, “fona krāsa” un “krāsa ”.
- Pēc tam izveidojiet pogas, izmantojot “< pogu >” tagu, kas izsauc “ darbība ()' funkciju, izmantojot ' onclick ” notikumu klausītājs.
- Turklāt izveidojiet vecāku ' div ' elementu un piešķiriet tam 'ID' atlasīts ” un ievietojiet tajā fiktīvus datus.
- Pēc tam definējiet ' darbība ()” funkciju un saglabā atlasītā elementa atsauci, piekļūstot tā unikālajam ID.
- Visbeidzot izmantojiet ' klases saraksts ” rekvizītu, lai piešķirtu klases un pievienotu “ pievienot ()” metodi. Pēc tam nododiet CSS klases šīs metodes iekavās, un šīs klases tiks lietotas atlasītajam elementam.
Izvade pēc iepriekš minētā koda apkopošanas tiek ģenerēta šādi:
Iepriekš minētais gif apstiprina, ka CSS klases ir piešķirtas atlasītajam elementam, izmantojot “ pievienot ()” metodi.
2. metode: Remove() metode
Šī metode noņem konkrēto klasi vai ID no viena vai vairākiem atlasītajiem elementiem, kā tas izdarīts tālāk norādītajā kodā:
< galvu >< stils >
.fonta izmērs {
fonts- Izmērs : liels;
}
. krāsa {
fons- krāsa : kadetblūs;
krāsa : balti dūmi;
}
< / stils >
< / galvu >
< ķermeni >
< h1 stils = 'krāsa: kadetzila;' > Linuxhint < / h1 >
< pogu onclick = 'darbība ()' >Papildinātājs< / pogu >
< lpp >Nospiediet augstāk esošo pogu, lai lietotu stilu< / lpp >
< div id = 'izvēlēts' klasē = 'fonta izmēra krāsa' >
< lpp > es esmu Atlasīts Teksts .< / lpp >
< / div >
< skripts >
funkciju darbība ( ) {
document.getElementById ( 'izvēlēts' ) .classList.remove ( 'krāsa' ) ;
}
< / skripts >
< / ķermeni >
Iepriekš minētā koda apraksts ir šāds:
- Sākotnēji šeit kā piemērs tiek izmantots iepriekš minētajā kodā izskaidrotais kods.
- Šeit gan ' krāsa ' un ' fonta izmērs ” klases tiek tieši piešķirtas atlasītajam elementam.
- Pēc tam iekšpusē ' darbība ()” funkcija, ko izsauc “ onclick ' notikumu klausītājs ' noņemt ()” tiek izmantota marķiera metode.
- Šī metode aizņem vienu vai vairākas klases, kuras tiks noņemtas no atlasītā elementa. Mūsu gadījumā “ krāsa ” klase tiks noņemta no atlasītā HTML elementa.
Iepriekš minētā koda izvade tiek parādīta šādi:
Iepriekš redzamā izvade parāda, ka konkrētā CSS klase ir noņemta no atlasītā elementa, izmantojot metodi “remove()”.
3. metode: Pārslēgt() metodi
' pārslēgt ()” metode ir abu “ pievienot ()' un ' noņemt ()' metodes. Vispirms tas piešķir norādīto CSS klasi atlasītajam HTML elementam un pēc tam noņem to atbilstoši lietotāja darbībām.
< html >< galvu >
< stils >
.fonta izmērs {
fonts- Izmērs : xx-liels;
}
. krāsa {
fons- krāsa : kadetblūs;
krāsa : balti dūmi;
}
< / stils >
< / galvu >
< ķermeni >
< h1 stils = 'krāsa: kadetzila;' > Linuxhint < / h1 >
< pogu onclick = 'darbība ()' >Papildinātājs< / pogu >
< lpp >Nospiediet augstāk esošo pogu, lai lietotu stilu< / lpp >
< div id = 'izvēlēts' >
< lpp > es esmu Atlasīts Teksts .< / lpp >
< / div >
< skripts >
funkciju darbība ( ) {
document.getElementById ( 'izvēlēts' ) .classList.toggle ( 'fonta izmērs' ) ;
}
< / skripts >
< / ķermeni >
< / html >
Iepriekš minētā koda apraksts ir norādīts zemāk:
- Tiek izmantota tā pati programma kā iepriekšējā sadaļā, tikai “ pārslēgt ()” metodi aizstāj ar “ noņemt ()” metodi.
Kompilācijas fāzes beigās rezultāts būs šāds:
Izvade parāda, ka konkrētā CSS klase tiek pievienota un noņemta atbilstoši lietotāja darbībai.
4. metode: satur() metode
' satur ()” metode tiek izmantota, lai pārbaudītu konkrētu CSS klašu pieejamību HTML elementā, un tās ieviešana ir norādīta zemāk:
< skripts >funkciju darbība ( ) {
ļaujiet x = dokumentu. getElementById ( 'izvēlēts' ) . klases saraksts . satur ( 'fonta izmērs' ) ;
dokumentu. getElementById ( 'pārbaude' ) . innerHTML = x ;
}
skripts >
HTML un CSS daļa paliek nemainīga. Tikai sadaļā “< skripts >” tagu, atlasītajam elementam tiek piemērota metode “contains()”, lai pārbaudītu, vai “ fonta izmērs ” tiek piemērots šim elementam vai nē. Pēc tam rezultāts tiek parādīts tīmekļa lapā HTML elementā ar ID ' pārbaude ”.
Pēc iepriekš minētā koda apkopošanas tīmekļa lapa izskatās šādi:
Izvade parāda, ka vērtība “ taisnība ” tiek atgriezts, kas nozīmē, ka atlasītajam HTML elementam tiek piemērota konkrētā CSS klase.
5. metode: vienumu() metode
' lieta ()” metode atlasa marķieri vai CSS klasi atbilstoši to indeksa numuram, sākot no “ 0 ”, kā parādīts zemāk:
< ķermeni >< h1 stils = 'krāsa: kadetzila;' > Linux h1 >
< pogu onclick = 'darbība ()' > Pārbaudītājs pogu >
< lpp > CSS klasē kas tiek piešķirts sākumā , tiek izgūts : lpp >
< h3 id = 'izmantot gadījumu' klasē = 'firstCls secondCls thirdCls' > h3 >
< skripts >
funkciju darbība ( ) {
ļaujiet demoList = dokumentu. getElementById ( 'izmantot gadījumu' ) . klases saraksts . lieta ( 0 ) ;
dokumentu. getElementById ( 'izmantot gadījumu' ) . innerHTML = demoList ;
}
skripts >
ķermeni >
Iepriekš minētā koda skaidrojums:
- Pirmkārt, mūsu atlasītajam elementam tiek piešķirtas vairākas CSS klases ar ID ' izmantot gadījumu ” un metodi “action()”, kas tiek izsaukta, izmantojot “ onclick ” pasākums.
- Šajā funkcijā “ lieta ()” metode ar indeksu “ 0 ” tiek pievienots atlasītajam elementam. Rezultāts tiek saglabāts mainīgajā ' demoList ”, kas pēc tam tiek izdrukāts tīmekļa lapā, izmantojot innerHTML ” īpašums.
Pēc kompilācijas beigām rezultāts ir šāds:
Izvadē tiek parādīts CSS klases nosaukums, kas vispirms attiecas uz atlasīto elementu un tiek izgūts.
6. metode: garums Īpašība
' garums TokenList rekvizīts atgriež elementu vai piešķirto klašu skaitu, kas tiek lietots atlasītajam elementam. Īstenošanas process ir norādīts zemāk:
< skripts >funkciju darbība ( ) {
lai viņi nojauc = dokumentu. getElementById ( 'izmantot gadījumu' ) . klases saraksts . garums ;
dokumentu. getElementById ( 'izmantot gadījumu' ) . innerHTML = nojaukt ;
}
skripts >
Iepriekš minētajā koda blokā:
- Vispirms ' garums ' īpašums ir pievienots ' klases saraksts ” rekvizītu, lai izgūtu atlasītajam elementam piešķirto klašu skaitu.
- Pēc tam rekvizīta rezultāts tiek saglabāts mainīgajā ' nojaukt ', kas tiks parādīts tīmekļa lapā elementā ar ID ' izmantot gadījumu ”.
- Pārējā koda daļa paliek tāda pati kā iepriekšējā sadaļā.
Ģenerētā izvade pēc kompilācijas ir norādīta zemāk:
Izvade atgriež lietotās klases virs elementa.
7. metode: Aizstāt() metode
' aizvietot ()” metode ir tāda, kas ņem vismaz divus parametrus un pirmo parametru aizstāj ar otro parametru atlasītajam elementam, kā parādīts tālāk:
< skripts >funkciju darbība ( ) {
ļaujiet demoList = dokumentu. getElementById ( 'izmantot gadījumu' ) . klases saraksts . aizvietot ( 'fonta izmērs' , 'krāsa' ) ;
}
skripts >
Šeit CSS ' fonta izmērs 'klase tiek aizstāta ar CSS' krāsa ' klase elementam ar ID ' izmantot gadījumu ”. Pārējais HTML un CSS kods paliek tāds pats kā iepriekš minētajās sadaļās.
Pēc ' skripts ” daļu un apkopojot galveno HTML failu, izvade izskatās šādi:
Izvade parāda, ka konkrētā CSS klase ir aizstāta ar citu klasi.
8. metode: Vērtības īpašība
' vērtību ” marķieru saraksta rekvizīts izgūst vajadzīgās vērtības, kas piešķirtas atlasītajam HTML elementam. Kad tas tiek pievienots blakus ' klases saraksts ” rekvizītu, atlasītajiem elementiem piešķirtās klases tiek izgūtas, kā parādīts tālāk:
< skripts >funkciju darbība ( ) {
let demoVal = dokumentu. getElementById ( 'izmantot gadījumu' ) . klases saraksts . vērtību ;
dokumentu. getElementById ( 'drukāt' ) . innerHTML = demoVal ;
}
skripts >
Iepriekš minētā koda fragmenta apraksts:
- Iekšpusē ' darbība ()” funkcijas korpuss, “ vērtību ' īpašums ir pievienots blakus ' klases saraksts ” rekvizītu, lai izgūtu visas atlasīto HTML elementu piešķirtās klases.
- Pēc tam iepriekš minētā rekvizīta rezultāts tiek saglabāts mainīgajā ' demoVal ” un ievietots virs elementa, kura ID ir “print”.
Pēc kompilācijas fāzes beigām izvade tīmekļa lapā tiek ģenerēta šādi:
Izvade parāda CSS klašu nosaukumus, kas tiek lietoti atlasītajam elementam.
Secinājums
HTML DOM TokenList objekts ir kā masīvs, kurā tiek glabātas vairākas metodes un rekvizīti, kas tiek izmantoti, lai piemērotu noteiktu funkcionalitāti nodrošinātajam HTML elementam. Dažas no svarīgākajām un visplašāk izmantotajām metodēm, ko nodrošina TokenList, ir ' pievienot ()', 'noņemt ()', 'pārslēgt ()', 'satur ()', 'vienums ()' un 'aizstāt () ”. Rekvizīti, ko nodrošina TokenList, ir ' garums ' un ' vērtību ”. Šajā rakstā ir izskaidrota procedūra darbam ar JavaScript HTML DOMTokenList objektu.