El DOM” Lista de tokens 'Contiene muchas propiedades o métodos a los que el usuario final puede acceder según sus requisitos. Las propiedades y métodos proporcionados por esta lista realizan operaciones específicas sobre los conjuntos de datos proporcionados y devuelven el resultado correspondiente. Es más como una matriz porque tiene varios miembros que pueden seleccionarse por su índice y, al igual que una matriz, el primer índice es ' 0 ”. Pero no puedes utilizar métodos como “ pop()”, “push()” o “unirse()” ”.
Este blog explicará el funcionamiento de los objetos HTML DOMTokenList mediante JavaScript.
¿Cómo trabajar con objetos HTML DOMTokenList de JavaScript?
HTML DOMTokenList no es nada en sí mismo y su valor se debe simplemente a las propiedades y métodos que residen en él. Visitemos estas propiedades y métodos en detalle junto con su implementación adecuada.
Método 1: método Agregar()
El ' Agregar ()” adjunta o asigna nuevas clases, propiedades o tokens simples con el elemento seleccionado. Su sintaxis se establece a continuación:
htmlElemento. agregar ( uno o más tokens )
Su implementación se realiza a través del siguiente código:
< cabeza >
< estilo >
.tamaño de fuente{
tamaño de fuente: grande;
}
.color{
color de fondo: azul cadete;
color: humo blanco;
}
< / estilo >
< / cabeza >
< cuerpo >
< h1 estilo = 'color: azul cadete;' > linux < / h1 >
< botón al hacer clic = 'acción()' > Sumador < / botón >
< pag > Presione el botón de arriba para aplicar estilo < / pag >
< div identificación = 'seleccionado' >
< pag > Soy texto seleccionado. < / pag >
< / div >
< guion >
acción de función() {
document.getElementById('seleccionado').classList.add('fontSize', 'color');
}
< / guion >
< / cuerpo >
La explicación del código anterior es la siguiente:
- Primero, seleccione dos clases de CSS ' tamaño de fuente ' y 'color' y asígnales propiedades CSS aleatorias como ' tamaño de fuente”, “color de fondo” y “color ”.
- A continuación, cree botones usando “< botón >” etiqueta que invoca el “ acción ()” utilizando la función “ al hacer clic ” oyente de eventos.
- Además, cree un padre ' div 'elemento y asígnale una identificación de' seleccionado ”e inserte datos ficticios en su interior.
- Después de eso, defina el “ acción ()” y almacena la referencia del elemento seleccionado accediendo a su identificación única.
- Finalmente, utilice el “ Lista de clase ”propiedad para asignar las clases y adjuntar el “ agregar ()' método. Luego, pase las clases CSS dentro del paréntesis de este método y aplicará estas clases al elemento seleccionado.
El resultado después de la compilación del código anterior se genera como:
El gif anterior confirma que las clases CSS se han asignado a un elemento seleccionado mediante el botón ' agregar ()' método.
Método 2: método Eliminar()
Este método elimina la clase o identificación específica de uno o más elementos seleccionados como se hace en el siguiente código:
< cabeza >< estilo >
.tamaño de fuente {
fuente- tamaño : grande;
}
. color {
fondo- color : azul cadete;
color : humo blanco;
}
< / estilo >
< / cabeza >
< cuerpo >
< h1 estilo = 'color: azul cadete;' > sugerencia de Linux < / h1 >
< botón al hacer clic = 'acción()' >Sumador< / botón >
< pag >Presione el botón de arriba para aplicar estilo< / pag >
< div identificación = 'seleccionado' clase = 'Color del tamaño de fuente' >
< pag >yo soy Seleccionado Texto .< / pag >
< / div >
< guion >
función acción ( ) {
documento.getElementById ( 'seleccionado' ) .classList.eliminar ( 'color' ) ;
}
< / guion >
< / cuerpo >
La descripción del código anterior es la siguiente:
- Inicialmente, el código explicado en el código anterior se utiliza aquí como ejemplo.
- Aquí, tanto el “ color ' y ' tamaño de fuente Las clases se asignan directamente al elemento seleccionado.
- Después de eso, dentro del “ acción ()” función que es invocada por el “ al hacer clic ' oyente de eventos el ' eliminar ()” se utiliza el método del token.
- Este método toma una o varias clases que se eliminarán del elemento seleccionado. En nuestro caso, el “ color ”La clase se eliminará del elemento HTML seleccionado.
El resultado del código anterior se muestra como:
El resultado anterior muestra que la clase CSS específica se ha eliminado del elemento seleccionado utilizando el método 'remove()'.
Método 3: método Toggle()
El ' palanca ()” es la combinación de ambos “ agregar ()' y ' eliminar ()' métodos. Primero asigna la clase CSS proporcionada al elemento HTML seleccionado y luego lo elimina según las acciones del usuario.
< HTML >< cabeza >
< estilo >
.tamaño de fuente {
fuente- tamaño : xx-grande;
}
. color {
fondo- color : azul cadete;
color : humo blanco;
}
< / estilo >
< / cabeza >
< cuerpo >
< h1 estilo = 'color: azul cadete;' > sugerencia de Linux < / h1 >
< botón al hacer clic = 'acción()' >Sumador< / botón >
< pag >Presione el botón de arriba para aplicar estilo< / pag >
< div identificación = 'seleccionado' >
< pag >yo soy Seleccionado Texto .< / pag >
< / div >
< guion >
función acción ( ) {
documento.getElementById ( 'seleccionado' ) .classList.toggle ( 'tamaño de fuente' ) ;
}
< / guion >
< / cuerpo >
< / HTML >
A continuación se proporciona una descripción del código anterior:
- Se utiliza el mismo programa que se utiliza en la sección anterior, sólo el ' palanca ()” se reemplaza por el método “ eliminar ()' método.
Al final de la fase de compilación, el resultado será el siguiente:
El resultado muestra que la clase CSS específica se agrega y elimina según la acción del usuario.
Método 4: Método Contiene()
El ' contiene ()” se utiliza para verificar la disponibilidad de clases CSS específicas sobre el elemento HTML y su implementación se indica a continuación:
< guion >función acción ( ) {
deja x = documento. obtenerElementoPorId ( 'seleccionado' ) . Lista de clase . contiene ( 'tamaño de fuente' ) ;
documento. obtenerElementoPorId ( 'prueba' ) . HTML interno = X ;
}
guion >
La parte HTML y CSS sigue siendo la misma. Sólo en el “< guion >”, se aplica el método “contains()” sobre el elemento seleccionado para verificar si el “ tamaño de fuente ”se aplica a ese elemento o no. Luego, el resultado se muestra en la página web en un elemento HTML que tiene una identificación ' prueba ”.
Después de compilar el código anterior, la página web aparece así:
El resultado muestra que el valor de “ verdadero 'Se devuelve, lo que significa que la clase CSS específica se aplica sobre el elemento HTML seleccionado.
Método 5: método Item()
El ' artículo ()” selecciona el token o la clase CSS según su número de índice, comenzando desde “ 0 ', Como se muestra abajo:
< cuerpo >< estilo h1 = 'color: azul cadete;' > linux h1 >
< botón al hacer clic = 'acción()' > Inspector botón >
< pag > El CSS clase que se asigna al principio , se recupera : pag >
< identificación h3 = 'caso de uso' clase = 'primeraCls segundaCls terceraCls' > h3 >
< guion >
función acción ( ) {
dejar lista de demostración = documento. obtenerElementoPorId ( 'caso de uso' ) . Lista de clase . artículo ( 0 ) ;
documento. obtenerElementoPorId ( 'caso de uso' ) . HTML interno = lista de demostración ;
}
guion >
cuerpo >
Explicación del código anterior:
- Primero, se asignan varias clases CSS a nuestro elemento seleccionado con una identificación de ' caso de uso ” y el método “action()” que se invoca a través del “ al hacer clic ' evento.
- En esta función, el “ artículo ()” método con un índice de “ 0 ”se adjunta al elemento seleccionado. El resultado se almacena en la variable ' lista de demostración ”que luego se imprime en la página web usando el “ HTML interno ' propiedad.
Una vez finalizada la compilación, el resultado es el siguiente:
El resultado muestra el nombre de la clase CSS que se aplica primero sobre el elemento seleccionado y se recupera.
Método 6: propiedad de longitud
El ' longitud La propiedad de tokenList devuelve el número de elementos o clases asignadas que se aplican sobre el elemento seleccionado. El proceso de implementación se detalla a continuación:
< guion >función acción ( ) {
let demolen = documento. obtenerElementoPorId ( 'caso de uso' ) . Lista de clase . longitud ;
documento. obtenerElementoPorId ( 'caso de uso' ) . HTML interno = demolen ;
}
guion >
En el bloque de código anterior:
- Primero el ' longitud 'La propiedad está adjunta a la' Lista de clase ”Propiedad para recuperar el número de clases que están asignadas sobre el elemento seleccionado.
- A continuación, el resultado de la propiedad se almacena en la variable ' demolen ' que se mostrará en la página web en un elemento con una identificación de ' caso de uso ”.
- El resto del código sigue siendo el mismo que en la sección anterior.
El resultado generado después de la compilación se indica a continuación:
La salida devuelve las clases aplicadas sobre el elemento.
Método 7: Método Reemplazar()
El ' reemplazar ()” es aquel que toma al menos dos parámetros y reemplaza el primer parámetro con el segundo parámetro para el elemento seleccionado, como se muestra a continuación:
< guion >función acción ( ) {
dejar lista de demostración = documento. obtenerElementoPorId ( 'caso de uso' ) . Lista de clase . reemplazar ( 'tamaño de fuente' , 'color' ) ;
}
guion >
Aquí, el CSS “ tamaño de fuente 'La clase se reemplaza con CSS' color 'clase para un elemento con una identificación de' caso de uso ”. El resto del código HTML y CSS sigue siendo el mismo que en las secciones anteriores.
Después de modificar el “ guion ”parte y compilando el archivo HTML principal, el resultado se ve así:
El resultado muestra que la clase CSS específica ha sido reemplazada por otra clase.
Método 8: propiedad de valor
El ' valor La propiedad de lista de tokens recupera los valores requeridos asignados al elemento HTML seleccionado. Cuando se adjunta junto al ' Lista de clase ”, se recuperan las clases asignadas a los elementos seleccionados, como se muestra a continuación:
< guion >función acción ( ) {
dejar demostración = documento. obtenerElementoPorId ( 'caso de uso' ) . Lista de clase . valor ;
documento. obtenerElementoPorId ( 'imprimir' ) . HTML interno = demostración ;
}
guion >
Descripción del fragmento de código mencionado anteriormente:
- Dentro de ' acción ()” cuerpo de la función, el “ valor La propiedad 'se adjunta junto al' Lista de clase ”Propiedad para recuperar todas las clases asignadas de los elementos HTML seleccionados.
- A continuación, el resultado de la propiedad anterior se almacena en una variable ' demostración ”y se inserta sobre el elemento que tiene una identificación de “imprimir”.
Una vez finalizada la fase de compilación, el resultado en una página web se genera de la siguiente manera:
El resultado muestra el nombre de las clases CSS que se aplican sobre el elemento seleccionado.
Conclusión
El objeto HTML DOM TokenList es como una matriz que almacena múltiples métodos y propiedades que se utilizan para aplicar una funcionalidad específica sobre el elemento HTML proporcionado. Algunos de los métodos más importantes y utilizados proporcionados por TokenList son “ agregar()”, “eliminar()”, “alternar()”, “contiene()”, “elemento()” y “reemplazar()” ”. Las propiedades proporcionadas por TokenList son ' longitud ' y ' valor ”. Este artículo ha explicado el procedimiento para trabajar con el objeto DOMTokenList HTML de JavaScript.