DOM” TokenList ” conține o mulțime de proprietăți sau metode care pot fi accesate de utilizatorul final în funcție de cerințele acestora. Proprietățile și metodele furnizate de această listă efectuează operații specifice peste seturile de date furnizate și returnează rezultatul în consecință. Este mai mult ca o matrice, deoarece are diferiți membri care pot fi selectați de indexul lor și, la fel ca o matrice, primul index este „ 0 ”. Dar nu poți folosi metode precum „ pop()”, „push()” sau „join() ”.
Acest blog va explica funcționarea obiectelor HTML DOMTokenList prin JavaScript.
Cum se lucrează cu obiectele JavaScript HTML DOMTokenList?
HTML DOMTokenList nu este nimic în sine și valoarea sa se datorează doar proprietăților și metodelor care se află în el. Să vizităm aceste proprietăți și metode în detaliu, împreună cu implementarea corectă.
Metoda 1: Metoda Add().
„ Adăuga ()” atașează sau atribuie noi clase, proprietăți sau simboluri simple cu elementul selectat. Sintaxa sa este prezentată mai jos:
htmlElement. adăuga ( oneOrMoreToken )
Implementarea sa se realizează prin următorul cod:
< cap >
< stil >
.marimea fontului{
dimensiunea fontului: mare;
}
.culoare{
culoare de fundal: cadetblue;
culoare: fum alb;
}
< / stil >
< / cap >
< corp >
< h1 stil = 'culoare: cadetblue;' > Linux < / h1 >
< buton onclick = 'acțiune()' > Sumator < / buton >
< p > Apăsați butonul de mai sus pentru a aplica stilul < / p >
< div id = 'selectat' >
< p > Sunt Text Selectat. < / p >
< / div >
< scenariu >
function action() {
document.getElementById('selectat').classList.add('fontSize', 'culoare');
}
< / scenariu >
< / corp >
Explicația codului de mai sus este următoarea:
- Mai întâi, selectați două clase CSS „ marimea fontului ” și „color” și atribuiți-le proprietăți CSS aleatorii precum „ dimensiunea fontului”, „culoarea fundalului” și „culoarea”. ”.
- Apoi, creați butoane folosind „< buton >” etichetă care invocă „ acțiune ()” folosind funcția „ onclick ” ascultător de evenimente.
- În plus, creați un părinte „ div ” element și atribuiți-i un id de „ selectat ” și inserați date false în interiorul acestuia.
- După aceea, definiți „ acțiune ()” și stochează referința elementului selectat accesând id-ul unic al acestuia.
- În cele din urmă, utilizați „ classList ” pentru a atribui clasele și pentru a atașa ” adăuga ()” metoda. Apoi, treceți clasele CSS în această paranteză a metodei și va aplica aceste clase la elementul selectat.
Ieșirea după compilarea codului de mai sus este generată ca:
Gif-ul de mai sus confirmă că clasele CSS au fost atribuite unui element selectat prin intermediul „ adăuga ()” metoda.
Metoda 2: Metoda Remove().
Această metodă elimină clasa sau id-ul specific din unul sau mai multe elemente selectate, așa cum se face în codul de mai jos:
< cap >< stil >
.marimea fontului {
font- mărimea : mare;
}
. culoare {
fundal- culoare : cadetblue;
culoare : fum alb;
}
< / stil >
< / cap >
< corp >
< h1 stil = 'culoare: cadetblue;' > Linuxhint < / h1 >
< buton onclick = 'acțiune()' >Adder< / buton >
< p >Apăsați butonul de mai sus pentru a aplica stilul< / p >
< div id = 'selectat' clasă = „culoare fontSize” >
< p > Eu sunt Selectat Text .< / p >
< / div >
< scenariu >
funcţie acțiune ( ) {
document.getElementById ( 'selectat' ) .classList.eliminare ( 'culoare' ) ;
}
< / scenariu >
< / corp >
Descrierea codului de mai sus este următoarea:
- Inițial, codul explicat în codul de mai sus este folosit aici ca exemplu.
- Aici, atât „ culoare ' și ' marimea fontului ” clasele sunt alocate direct elementului selectat.
- După aceea, în interiorul „ acțiune ()” funcția care este invocată de „ onclick ” ascultător de evenimente ” elimina ()” este folosită metoda tokenului.
- Această metodă ia una sau mai multe clase care vor fi eliminate din elementul selectat. În cazul nostru, „ culoare ” va fi eliminată din elementul HTML selectat.
Ieșirea pentru codul de mai sus este afișată ca:
Ieșirea de mai sus arată că clasa CSS specifică a fost eliminată din elementul selectat folosind metoda „remove()”.
Metoda 3: Metoda Toggle().
„ comutare ()” metoda este combinația dintre ambele „ adăuga ()' și ' elimina ()” metode. Mai întâi atribuie clasa CSS furnizată elementului HTML selectat și apoi o elimină în funcție de acțiunile utilizatorului.
< html >< cap >
< stil >
.marimea fontului {
font- mărimea : xx-mari;
}
. culoare {
fundal- culoare : cadetblue;
culoare : fum alb;
}
< / stil >
< / cap >
< corp >
< h1 stil = 'culoare: cadetblue;' > Linuxhint < / h1 >
< buton onclick = 'acțiune()' >Adder< / buton >
< p >Apăsați butonul de mai sus pentru a aplica stilul< / p >
< div id = 'selectat' >
< p > Eu sunt Selectat Text .< / p >
< / div >
< scenariu >
funcţie acțiune ( ) {
document.getElementById ( 'selectat' ) .classList.toggle ( 'marimea fontului' ) ;
}
< / scenariu >
< / corp >
< / html >
O descriere a codului de mai sus este prezentată mai jos:
- Este folosit același program ca în secțiunea de mai sus, doar „ comutare ()” este înlocuită cu metoda „ elimina ()” metoda.
La sfârșitul fazei de compilare, rezultatul va fi după cum urmează:
Rezultatul arată că clasa CSS specifică este adăugată și eliminată în funcție de acțiunea utilizatorului.
Metoda 4: Metoda Conține().
„ conţine ()” este folosită pentru a verifica disponibilitatea unor clase CSS specifice peste elementul HTML, iar implementarea sa este menționată mai jos:
< scenariu >funcţie acțiune ( ) {
fie x = document. getElementById ( 'selectat' ) . classList . conţine ( 'marimea fontului' ) ;
document. getElementById ( 'Test' ) . innerHTML = X ;
}
scenariu >
Partea HTML și CSS rămâne aceeași. Numai în „< scenariu >”, metoda „conține()” este aplicată peste elementul selectat pentru a verifica dacă „ marimea fontului ” se aplică sau nu acelui element. Apoi, rezultatul este afișat pe pagina web pe un element HTML având un id „ Test ”.
După compilarea codului de mai sus, pagina web apare astfel:
Rezultatul arată că valoarea „ Adevărat ” este returnat, ceea ce înseamnă că clasa CSS specifică este aplicată peste elementul HTML selectat.
Metoda 5: Metoda Item().
„ articol ()” selectează jetonul sau clasa CSS în funcție de numărul lor de index, începând de la „ 0 ', așa cum se arată mai jos:
< corp >< stilul h1 = 'culoare: cadetblue;' > Linux h1 >
< butonul la clic = 'acțiune()' > dama buton >
< p > CSS-ul clasă care este atribuit la început , este recuperat : p >
< h3 id = 'utilizare caz' clasă = „firstCls secondCls thirdCls” > h3 >
< scenariu >
funcţie acțiune ( ) {
lasă demoList = document. getElementById ( 'utilizare caz' ) . classList . articol ( 0 ) ;
document. getElementById ( 'utilizare caz' ) . innerHTML = demoList ;
}
scenariu >
corp >
Explicația codului de mai sus:
- În primul rând, mai multe clase CSS sunt atribuite elementului nostru selectat cu un id de „ utilizare caz ” și metoda „action()” care este invocată prin intermediul „ onclick ” eveniment.
- În această funcție, „ articol ()” metoda cu un index de „ 0 ” se atașează la elementul selectat. Rezultatul este stocat în variabila „ demoList ” care este apoi tipărit pe pagina web folosind „ innerHTML ” proprietate.
După sfârșitul compilației, rezultatul vine astfel:
Ieșirea arată numele clasei CSS care se aplică la început peste elementul selectat și este preluat.
Metoda 6: proprietatea lungime
„ lungime ” proprietatea tokenList returnează numărul de elemente sau clase alocate care sunt aplicate peste elementul selectat. Procesul de implementare este prezentat mai jos:
< scenariu >funcţie acțiune ( ) {
lasa-i sa demoleze = document. getElementById ( 'utilizare caz' ) . classList . lungime ;
document. getElementById ( 'utilizare caz' ) . innerHTML = demola ;
}
scenariu >
În blocul de cod de mai sus:
- Mai întâi „ lungime ” proprietatea este atașată la ” classList ” proprietate pentru a prelua numărul de clase care sunt atribuite elementului selectat.
- Apoi, rezultatul proprietății este stocat în variabila „ demola ” care va fi afișat pe pagina web pe un element cu id-ul „ utilizare caz ”.
- Restul codului rămâne același ca în secțiunea de mai sus.
Ieșirea generată după compilare este prezentată mai jos:
Ieșirea returnează clasele aplicate peste element.
Metoda 7: Metoda Replace().
„ a inlocui ()” metoda este una care ia cel puțin doi parametri și înlocuiește primul parametru cu al doilea parametru pentru elementul selectat, după cum se arată mai jos:
< scenariu >funcţie acțiune ( ) {
lasă demoList = document. getElementById ( 'utilizare caz' ) . classList . a inlocui ( 'marimea fontului' , 'culoare' ) ;
}
scenariu >
Aici, CSS „ marimea fontului „clasa este înlocuită cu CSS „ culoare ” clasa pentru un element cu un id de “ utilizare caz ”. Restul codului HTML și CSS rămâne același ca în secțiunile de mai sus.
După modificarea „ scenariu ” și compilând fișierul HTML principal, rezultatul arată astfel:
Rezultatul arată că clasa CSS specifică a fost înlocuită cu o altă clasă.
Metoda 8: Proprietatea valorii
„ valoare ” proprietatea token list preia valorile necesare atribuite elementului HTML selectat. Când se atașează lângă „ classList ”, clasele alocate elementelor selectate sunt preluate, după cum se demonstrează mai jos:
< scenariu >funcţie acțiune ( ) {
lasa demoVal = document. getElementById ( 'utilizare caz' ) . classList . valoare ;
document. getElementById ( 'imprimare' ) . innerHTML = demoVal ;
}
scenariu >
Descrierea fragmentului de cod menționat mai sus:
- În interiorul ' acțiune ()”, corpul funcției, „ valoare ” proprietatea este atașată lângă ” classList ” pentru a prelua toate clasele alocate ale elementelor HTML selectate.
- Apoi, rezultatul proprietății de mai sus este stocat într-o variabilă „ demoVal ” și inserat peste elementul având id-ul „print”.
După încheierea fazei de compilare, rezultatul pe o pagină web este generat după cum urmează:
Ieșirea arată numele claselor CSS care sunt aplicate peste elementul selectat.
Concluzie
Obiectul HTML DOM TokenList este ca o matrice care stochează mai multe metode și proprietăți care sunt utilizate pentru a aplica funcționalități specifice asupra elementului HTML furnizat. Unele dintre cele mai importante și utilizate metode oferite de TokenList sunt „ add()”, „eliminare()”, „toggle()”, „contains()”, „item()” și „replace() ”. Proprietățile furnizate de TokenList sunt „ lungime ' și ' valoare ”. Acest articol a explicat procedura de lucru cu obiectul JavaScript HTML DOMTokenList.