DOM' TokenList ” sisältää paljon ominaisuuksia tai menetelmiä, joihin loppukäyttäjä voi päästä omien vaatimustensa mukaan. Tämän luettelon tarjoamat ominaisuudet ja menetelmät suorittavat tiettyjä toimintoja annetuille tietojoukoille ja palauttavat tuloksen vastaavasti. Se on enemmän kuin taulukko, koska siinä on useita jäseniä, jotka voidaan valita indeksin mukaan ja aivan kuten taulukon ensimmäinen indeksi on ' 0 ”. Mutta et voi käyttää sellaisia menetelmiä kuin ' pop()', 'push()' tai 'join() ”.
Tämä blogi selittää HTML DOMTokenList -objektien toiminnan JavaScriptin avulla.
Kuinka työskennellä JavaScript HTML DOMTokenList -objektien kanssa?
HTML DOMTokenList ei ole sinänsä mitään ja sen arvo johtuu vain siinä olevista ominaisuuksista ja menetelmistä. Tutustutaan näihin ominaisuuksiin ja menetelmiin yksityiskohtaisesti asianmukaisen toteutuksen kanssa.
Tapa 1: Lisää()-menetelmä
' Lisätä ()” liittää tai määrittää uusia luokkia, ominaisuuksia tai yksinkertaisia tunnuksia valitun elementin kanssa. Sen syntaksi on ilmoitettu alla:
htmlElement. lisätä ( oneOrMoreToken )
Sen toteutus suoritetaan seuraavan koodin avulla:
< pää >
< tyyli >
.Fonttikoko{
fontin koko: suuri;
}
.väri{
taustaväri: kadetinsininen;
väri: whitesmoke;
}
< / tyyli >
< / pää >
< kehon >
< h1 tyyli = 'väri: kadetinsininen;' > Linux < / h1 >
< -painiketta klikkaamalla = 'toiminta()' > Adder < / -painiketta >
< s > Käytä tyyliä painamalla yllä olevaa painiketta < / s >
< div id = 'valittu' >
< s > Olen Valittu Teksti. < / s >
< / div >
< käsikirjoitus >
funktio toiminta() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / käsikirjoitus >
< / kehon >
Yllä olevan koodin selitys on seuraava:
- Valitse ensin kaksi CSS-luokkaa ' Fonttikoko ' ja 'color' ja määritä niille satunnaisia CSS-ominaisuuksia, kuten ' font-size, 'background-color' ja 'color ”.
- Luo seuraavaksi painikkeita käyttämällä < -painiketta >' -tunniste, joka kutsuu ' toiminta ()'-toiminto käyttämällä ' klikkaamalla ”tapahtuman kuuntelija.
- Luo lisäksi vanhempi ' div ' -elementti ja anna sille tunnus ' valittu ” ja lisää sen sisään valedata.
- Määritä sen jälkeen ' toiminta ()”-funktion ja tallentaa valitun elementin viittauksen käyttämällä sen yksilöllistä tunnusta.
- Käytä lopuksi ' luokkaluettelo '-ominaisuutta määrittääksesi luokat ja liittääksesi ' lisätä ()' menetelmällä. Siirrä sitten CSS-luokat tämän menetelmän suluissa ja se soveltaa näitä luokat valittuun elementtiin.
Tulos yllä olevan koodin kääntämisen jälkeen luodaan seuraavasti:
Yllä oleva gif vahvistaa, että CSS-luokat on määritetty valitulle elementille ' lisätä ()' menetelmällä.
Tapa 2: Poista()-menetelmä
Tämä menetelmä poistaa tietyn luokan tai tunnuksen yhdestä tai useammasta valitusta elementistä alla olevan koodin mukaisesti:
< pää >< tyyli >
.Fonttikoko {
fontti- koko : suuri;
}
. väri {
tausta- väri : cadetblue;
väri : valkoinen savu;
}
< / tyyli >
< / pää >
< kehon >
< h1 tyyli = 'väri: kadetinsininen;' > Linuxvinkki < / h1 >
< -painiketta klikkaamalla = 'toiminta()' >lisääjä< / -painiketta >
< s >Paina yllä olevaa painiketta käyttääksesi tyyliä< / s >
< div id = 'valittu' luokkaa = 'fontSize color' >
< s > olen Valittu Teksti .< / s >
< / div >
< käsikirjoitus >
toiminto toiminta ( ) {
document.getElementById ( 'valittu' ) .classList.remove ( 'väri' ) ;
}
< / käsikirjoitus >
< / kehon >
Yllä olevan koodin kuvaus on seuraava:
- Aluksi yllä olevassa koodissa selitettyä koodia käytetään tässä esimerkkinä.
- Täällä molemmat ' väri ' ja ' Fonttikoko ” luokat kohdistetaan suoraan valittuun elementtiin.
- Sen jälkeen sisällä ' toiminta ()' -toiminto, jota ' klikkaamalla 'tapahtuman kuuntelija' Poista ()” -tunnusmenetelmää käytetään.
- Tämä menetelmä ottaa yhden tai useita luokkia, jotka poistetaan valitusta elementistä. Meidän tapauksessamme ' väri ” luokka poistetaan valitusta HTML-elementistä.
Yllä olevan koodin tulos näytetään seuraavasti:
Yllä oleva tulos näyttää, että tietty CSS-luokka on poistettu valitusta elementistä 'remove()'-menetelmällä.
Tapa 3: Toggle()-menetelmä
' vaihtaa ()' -menetelmä on yhdistelmä molemmista ' lisätä ()' ja ' Poista ()' -menetelmiä. Se määrittää ensin toimitetun CSS-luokan valitulle HTML-elementille ja sitten poistaa sen käyttäjän toimien mukaan.
< html >< pää >
< tyyli >
.Fonttikoko {
fontti- koko : xx-suuri;
}
. väri {
tausta- väri : cadetblue;
väri : valkoinen savu;
}
< / tyyli >
< / pää >
< kehon >
< h1 tyyli = 'väri: kadetinsininen;' > Linuxvinkki < / h1 >
< -painiketta klikkaamalla = 'toiminta()' >lisääjä< / -painiketta >
< s >Paina yllä olevaa painiketta käyttääksesi tyyliä< / s >
< div id = 'valittu' >
< s > olen Valittu Teksti .< / s >
< / div >
< käsikirjoitus >
toiminto toiminta ( ) {
document.getElementById ( 'valittu' ) .classList.toggle ( 'Fonttikoko' ) ;
}
< / käsikirjoitus >
< / kehon >
< / html >
Yllä olevan koodin kuvaus on alla:
- Samaa ohjelmaa käytetään kuin yllä olevassa osiossa, vain ' vaihtaa ()' menetelmä korvataan ' Poista ()' menetelmällä.
Käännösvaiheen lopussa tulos on seuraava:
Tulos osoittaa, että tiettyä CSS-luokkaa lisätään ja poistetaan käyttäjän toiminnan mukaan.
Menetelmä 4: Sisältää()-menetelmä
' sisältää ()' -menetelmää käytetään tiettyjen CSS-luokkien saatavuuden tarkistamiseen HTML-elementin kautta ja sen toteutus on esitetty alla:
< käsikirjoitus >toiminto toiminta ( ) {
anna x = asiakirja. getElementById ( 'valittu' ) . luokkaluettelo . sisältää ( 'Fonttikoko' ) ;
asiakirja. getElementById ( 'testata' ) . innerHTML = x ;
}
käsikirjoitus >
HTML- ja CSS-osa pysyy samana. Vain kohdassa '< käsikirjoitus >' -tunnistetta, 'contains()'-menetelmää käytetään valitun elementin päälle tarkistamaan, onko ' Fonttikoko ” sovelletaanko tähän elementtiin vai ei. Sitten tulos näytetään verkkosivulla HTML-elementissä, jolla on tunnus ' testata ”.
Yllä olevan koodin laatimisen jälkeen verkkosivu näyttää tältä:
Tulos osoittaa, että arvo ' totta ' palautetaan, mikä tarkoittaa, että tiettyä CSS-luokkaa sovelletaan valitun HTML-elementin päälle.
Menetelmä 5: Item() -menetelmä
' kohde ()' -menetelmä valitsee tunnuksen tai CSS-luokan niiden indeksinumeron mukaan alkaen ' 0 ', kuten alla:
< kehon >< h1 tyyliin = 'väri: kadetinsininen;' > Linux h1 >
< painiketta onclick = 'toiminta()' > Tarkistaja -painiketta >
< s > CSS luokkaa joka määrätään aluksi , otetaan talteen : s >
< h3 id = 'useCase' luokkaa = 'firstCls secondCls thirdCls' > h3 >
< käsikirjoitus >
toiminto toiminta ( ) {
anna demoList = asiakirja. getElementById ( 'useCase' ) . luokkaluettelo . kohde ( 0 ) ;
asiakirja. getElementById ( 'useCase' ) . innerHTML = demoList ;
}
käsikirjoitus >
kehon >
Selitys yllä olevalle koodille:
- Ensinnäkin useita CSS-luokkia määritetään valitulle elementille, jonka tunnus on ' useCase ' ja 'action()'-metodi, jota kutsutaan '' klikkaamalla ' tapahtuma.
- Tässä toiminnossa ' kohde ()' menetelmä, jonka indeksi on ' 0 ” liitetään valittuun elementtiin. Tulos tallennetaan muuttujaan ' demoList ', joka tulostetaan sitten verkkosivun päälle käyttämällä ' innerHTML ” omaisuutta.
Käännöksen päätyttyä tulos tulee seuraavanlainen:
Tulos näyttää CSS-luokan nimen, joka koskee ensin valittua elementtiä ja noudetaan.
Menetelmä 6: pituus Ominaisuus
' pituus ” tokenList-ominaisuus palauttaa elementtien tai määritettyjen luokkien määrän, joita käytetään valitulle elementille. Käyttöönottoprosessi on kuvattu alla:
< käsikirjoitus >toiminto toiminta ( ) {
anna niiden purkaa = asiakirja. getElementById ( 'useCase' ) . luokkaluettelo . pituus ;
asiakirja. getElementById ( 'useCase' ) . innerHTML = purkaa ;
}
käsikirjoitus >
Yllä olevassa koodilohkossa:
- Ensin ' pituus ' kiinteistö on liitetty ' luokkaluettelo ”-ominaisuutta hakeaksesi valitulle elementille määritettyjen luokkien määrän.
- Seuraavaksi ominaisuuden tulos tallennetaan muuttujaan ' purkaa ', joka näytetään verkkosivun päällä elementissä, jonka tunnus on ' useCase ”.
- Muu osa koodista pysyy samana kuin yllä olevassa osiossa.
Luotu tulos käännöksen jälkeen on ilmoitettu alla:
Tulos palauttaa käytetyt luokat elementin päälle.
Tapa 7: Korvaa()-menetelmä
' korvata ()' -menetelmä on menetelmä, joka ottaa vähintään kaksi parametria ja korvaa ensimmäisen parametrin valitun elementin toisella parametrilla, kuten alla on esitetty:
< käsikirjoitus >toiminto toiminta ( ) {
anna demoList = asiakirja. getElementById ( 'useCase' ) . luokkaluettelo . korvata ( 'Fonttikoko' , 'väri' ) ;
}
käsikirjoitus >
Tässä CSS ' Fonttikoko 'luokka korvataan CSS:llä' väri ' luokka elementille, jonka tunnus on ' useCase ”. Muu osa HTML- ja CSS-koodista pysyy samana kuin yllä olevissa osioissa.
Kun olet muuttanut ' käsikirjoitus ”-osaa ja käännettäessä pää-HTML-tiedosto, tulos näyttää tältä:
Tulos näyttää, että tietty CSS-luokka on korvattu toisella luokalla.
Tapa 8: Arvoominaisuus
' arvo ” token list -ominaisuus hakee valitulle HTML-elementille määritetyt vaaditut arvot. Kun se kiinnitetään ' luokkaluettelo ”-ominaisuuden, valituille elementeille määritetyt luokat haetaan alla olevan kuvan mukaisesti:
< käsikirjoitus >toiminto toiminta ( ) {
anna demoVal = asiakirja. getElementById ( 'useCase' ) . luokkaluettelo . arvo ;
asiakirja. getElementById ( 'Tulosta' ) . innerHTML = demoVal ;
}
käsikirjoitus >
Kuvaus yllä mainitusta koodinpätkästä:
- Sisällä ' toiminta ()' funktion runko, ' arvo 'kiinteistö on liitetty '' luokkaluettelo ”-ominaisuuden noutaaksesi kaikki valittujen HTML-elementtien määritetyt luokat.
- Seuraavaksi yllä olevan ominaisuuden tulos tallennetaan muuttujaan ' demoVal ' ja lisätään elementin päälle, jonka tunnus on 'print'.
Kääntämisvaiheen päätyttyä verkkosivulle luodaan tulos seuraavasti:
Tulos näyttää CSS-luokkien nimet, joita käytetään valitulle elementille.
Johtopäätös
HTML DOM TokenList -objekti on kuin matriisi, joka tallentaa useita menetelmiä ja ominaisuuksia, joita käytetään tiettyjen toimintojen soveltamiseen annetussa HTML-elementissä. Jotkut TokenListin tärkeimmistä ja laajimmin käytetyistä menetelmistä ovat ' add()), 'remove()', 'toggle()', 'contains()', 'item()' ja 'replace() ”. TokenListin tarjoamat ominaisuudet ovat ' pituus ' ja ' arvo ”. Tässä artikkelissa on selitetty, miten JavaScript HTML DOMTokenList -objektin kanssa toimitaan.