Il DOM” Elenco token ' contiene molte proprietà o metodi a cui l'utente finale può accedere in base alle proprie esigenze. Le proprietà e i metodi forniti da questo elenco eseguono operazioni specifiche sui set di dati forniti e restituiscono il risultato di conseguenza. È più simile a un array perché ha vari membri che possono essere selezionati in base al loro indice e proprio come un array il primo indice è ' 0 ”. Ma non puoi usare metodi come “ pop()”, “push()” o “join()” ”.
Questo blog spiegherà il funzionamento degli oggetti HTML DOMTokenList tramite JavaScript.
Come lavorare con gli oggetti JavaScript HTML DOMTokenList?
L'HTML DOMTokenList non è nulla di per sé e il suo valore è dovuto solo alle proprietà e ai metodi che risiedono in esso. Visitiamo queste proprietà e metodi in dettaglio insieme alla corretta implementazione.
Metodo 1: Metodo Aggiungi()
IL ' Aggiungere ()” associa o assegna nuove classi, proprietà o semplici token all'elemento selezionato. La sua sintassi è riportata di seguito:
htmlElemento. aggiungere ( unoOPiùToken )
La sua implementazione viene eseguita tramite il seguente codice:
< Testa >
< stile >
.dimensione del font{
dimensione carattere: grande;
}
.colore{
colore di sfondo: blu cadetto;
colore: bianco fumo;
}
< / stile >
< / Testa >
< corpo >
< h1 stile = 'colore: blu cadetto;' > Linux < / h1 >
< pulsante al clic = 'azione()' > Sommatore < / pulsante >
< P > Premi il pulsante sopra per applicare lo stile < / P >
< div id = 'selezionato' >
< P > Sono il testo selezionato. < / P >
< / div >
< sceneggiatura >
funzione azione() {
document.getElementById('selezionato').classList.add('fontSize', 'color');
}
< / sceneggiatura >
< / corpo >
La spiegazione del codice sopra è la seguente:
- Innanzitutto, seleziona due classi CSS “ dimensione del font ' e 'colore' e assegna loro proprietà CSS casuali come ' dimensione carattere', 'colore-sfondo' e 'colore ”.
- Successivamente, crea i pulsanti utilizzando il comando “< pulsante >' tag che richiama il ' azione ()” utilizzando la funzione “ al clic 'ascoltatore di eventi.
- Inoltre, crea un genitore “ div ' e assegnargli un ID ' selezionato ' e inserire dati fittizi al suo interno.
- Successivamente, definire il ' azione ()” e memorizza il riferimento dell'elemento selezionato accedendo al suo id univoco.
- Infine, utilizzare il ' classList ' per assegnare le classi e allegare la proprietà ' aggiungere ()' metodo. Quindi, passa le classi CSS all'interno di questa parentesi di metodo e applicherà queste classi all'elemento selezionato.
L'output dopo la compilazione del codice sopra viene generato come:
La gif sopra conferma che le classi CSS sono state assegnate a un elemento selezionato tramite il pulsante ' aggiungere ()' metodo.
Metodo 2: Metodo Remove()
Questo metodo rimuove la classe o l'ID specifico da uno o più elementi selezionati come fatto nel codice seguente:
< Testa >< stile >
.dimensione del font {
font- misurare : grande;
}
. colore {
sfondo- colore : cadettoblu;
colore : fumo bianco;
}
< / stile >
< / Testa >
< corpo >
< h1 stile = 'colore: blu cadetto;' > Suggerimento Linux < / h1 >
< pulsante al clic = 'azione()' >Sommatore< / pulsante >
< P >Premi il pulsante qui sopra per applicare lo stile< / P >
< div id = 'selezionato' classe = 'colore dimensione carattere' >
< P >Lo sono Selezionato Testo .< / P >
< / div >
< sceneggiatura >
funzione azione ( ) {
document.getElementById ( 'selezionato' ) .classList.remove ( 'colore' ) ;
}
< / sceneggiatura >
< / corpo >
La descrizione del codice sopra è la seguente:
- Inizialmente, il codice spiegato nel codice precedente viene utilizzato qui come esempio.
- Qui, sia il “ colore ' E ' dimensione del font Le classi vengono assegnate direttamente all'elemento selezionato.
- Successivamente, all’interno del “ azione ()” che viene invocata dalla funzione “ al clic 'l'ascoltatore di eventi' rimuovere ()” viene utilizzato il metodo token.
- Questo metodo accetta una o più classi che verranno rimosse dall'elemento selezionato. Nel nostro caso, il “ colore La classe ' verrà rimossa dall'elemento HTML selezionato.
L'output per il codice precedente viene visualizzato come:
L'output sopra mostra che la classe CSS specifica è stata rimossa dall'elemento selezionato utilizzando il metodo 'remove()'.
Metodo 3: metodo Toggle()
IL ' attivare/disattivare ()” è la combinazione di entrambi “ aggiungere ()' E ' rimuovere ()” metodi. Innanzitutto assegna la classe CSS fornita all'elemento HTML selezionato e quindi la rimuove in base alle azioni dell'utente.
< html >< Testa >
< stile >
.dimensione del font {
font- misurare : xx-grande;
}
. colore {
sfondo- colore : cadettoblu;
colore : fumo bianco;
}
< / stile >
< / Testa >
< corpo >
< h1 stile = 'colore: blu cadetto;' > Suggerimento Linux < / h1 >
< pulsante al clic = 'azione()' >Sommatore< / pulsante >
< P >Premi il pulsante qui sopra per applicare lo stile< / P >
< div id = 'selezionato' >
< P >Lo sono Selezionato Testo .< / P >
< / div >
< sceneggiatura >
funzione azione ( ) {
document.getElementById ( 'selezionato' ) .classList.toggle ( 'dimensione del font' ) ;
}
< / sceneggiatura >
< / corpo >
< / html >
Di seguito è riportata una descrizione del codice di cui sopra:
- Viene utilizzato lo stesso programma utilizzato nella sezione precedente, solo il ' attivare/disattivare ()” è sostituito dal metodo “ rimuovere ()' metodo.
Al termine della fase di compilazione, l’output sarà il seguente:
L'output mostra che la classe CSS specifica viene aggiunta e rimossa in base all'azione dell'utente.
Metodo 4: Metodo Contiene()
IL ' contiene ()' viene utilizzato per verificare la disponibilità di classi CSS specifiche sull'elemento HTML e la sua implementazione è indicata di seguito:
< sceneggiatura >funzione azione ( ) {
sia x = documento. getElementById ( 'selezionato' ) . classList . contiene ( 'dimensione del font' ) ;
documento. getElementById ( 'test' ) . innerHTML = X ;
}
sceneggiatura >
La parte HTML e CSS rimane la stessa. Solo nel campo “< sceneggiatura >', il metodo 'contains()' viene applicato all'elemento selezionato per verificare se il tag ' dimensione del font ' viene applicato a quell'elemento o meno. Quindi, il risultato viene visualizzato sulla pagina web su un elemento HTML avente un ID ' test ”.
Dopo la compilazione del codice sopra, la pagina web appare così:
L'output mostra che il valore di ' VERO ' viene restituito, il che significa che la classe CSS specifica viene applicata all'elemento HTML selezionato.
Metodo 5: Metodo Item()
IL ' articolo ()” seleziona il token o la classe CSS in base al numero di indice, a partire da “ 0 ', come mostrato di seguito:
< corpo >< stile h1 = 'colore: blu cadetto;' > Linux h1 >
< pulsante suclic = 'azione()' > Controllore pulsante >
< P > Il CSS classe che viene assegnato in un primo momento , viene recuperato : P >
< h3id = 'caso d'uso' classe = 'primaCl secondaCl terzaCl' > h3 >
< sceneggiatura >
funzione azione ( ) {
lascia demoList = documento. getElementById ( 'caso d'uso' ) . classList . articolo ( 0 ) ;
documento. getElementById ( 'caso d'uso' ) . innerHTML = demoList ;
}
sceneggiatura >
corpo >
Spiegazione del codice sopra:
- Innanzitutto, più classi CSS vengono assegnate al nostro elemento selezionato con un ID ' caso d'uso ' e il metodo 'action()' che viene richiamato tramite il metodo ' al clic 'evento.
- In questa funzione, il “ articolo ()” metodo con un indice di “ 0 ' viene allegato all'elemento selezionato. Il risultato viene memorizzato nella variabile “ demoList ' che viene poi stampato sulla pagina web utilizzando il comando ' innerHTML ' proprietà.
Al termine della compilazione, l'output è questo:
L'output mostra il nome della classe CSS che si applica inizialmente all'elemento selezionato e viene recuperata.
Metodo 6: Proprietà lunghezza
IL ' lunghezza 'La proprietà di tokenList restituisce il numero di elementi o classi assegnate che vengono applicate all'elemento selezionato. Il processo di implementazione è indicato di seguito:
< sceneggiatura >funzione azione ( ) {
lasciali demolire = documento. getElementById ( 'caso d'uso' ) . classList . lunghezza ;
documento. getElementById ( 'caso d'uso' ) . innerHTML = demolire ;
}
sceneggiatura >
Nel blocco di codice sopra:
- Prima il ' lunghezza ' la proprietà è collegata al ' classList ' per recuperare il numero di classi assegnate all'elemento selezionato.
- Successivamente, il risultato della proprietà viene memorizzato nella variabile “ demolire ' che verrà visualizzato sulla pagina Web su un elemento con un ID ' caso d'uso ”.
- Il resto del codice rimane lo stesso della sezione precedente.
L'output generato dopo la compilazione è indicato di seguito:
L'output restituisce le classi applicate sull'elemento.
Metodo 7: Metodo Sostituisci()
IL ' sostituire ()' è quello che accetta almeno due parametri e sostituisce il primo parametro con il secondo parametro per l'elemento selezionato, come mostrato di seguito:
< sceneggiatura >funzione azione ( ) {
lascia demoList = documento. getElementById ( 'caso d'uso' ) . classList . sostituire ( 'dimensione del font' , 'colore' ) ;
}
sceneggiatura >
Ecco, il CSS” dimensione del font 'la classe viene sostituita con il CSS' colore ' per un elemento con ID ' caso d'uso ”. Il resto del codice HTML e CSS rimane lo stesso delle sezioni precedenti.
Dopo aver modificato il “ sceneggiatura ' e compilando il file HTML principale, l'output sarà simile al seguente:
L'output mostra che la classe CSS specifica è stata sostituita con un'altra classe.
Metodo 8: Proprietà valore
IL ' valore ' La proprietà dell'elenco dei token recupera i valori richiesti assegnati all'elemento HTML selezionato. Quando viene attaccato accanto a ' classList ', vengono recuperate le classi assegnate agli elementi selezionati, come dimostrato di seguito:
< sceneggiatura >funzione azione ( ) {
lascia demoVal = documento. getElementById ( 'caso d'uso' ) . classList . valore ;
documento. getElementById ( 'stampa' ) . innerHTML = demoVal ;
}
sceneggiatura >
Descrizione dello snippet di codice sopra indicato:
- Dentro il ' azione ()” corpo della funzione, il “ valore ' la proprietà è allegata accanto a ' classList ' per recuperare tutte le classi assegnate degli elementi HTML selezionati.
- Successivamente, il risultato della proprietà di cui sopra viene memorizzato in una variabile “ demoVal ' e inserito sopra l'elemento avente id 'print'.
Dopo la fine della fase di compilazione, l'output su una pagina web viene generato come segue:
L'output mostra il nome delle classi CSS applicate all'elemento selezionato.
Conclusione
L'oggetto HTML DOM TokenList è come un array che memorizza più metodi e proprietà utilizzati per applicare funzionalità specifiche sull'elemento HTML fornito. Alcuni dei metodi più importanti e ampiamente utilizzati forniti da TokenList sono ' add()”, “remove()”, “toggle()”, “contains()”, “item()” e “replace() ”. Le proprietà fornite da TokenList sono ' lunghezza ' E ' valore ”. Questo articolo ha spiegato la procedura per lavorare con l'oggetto JavaScript HTML DOMTokenList.