La API classList de HTML5 vs jQuery
Se podría decir que esta es la segunda parte del primer artículo que escribí hace unos días sobre los nuevos selectores que ofrece HTML5 frente a los que ya nos brindaba jQuery. En este caso vemos la API para manipulación de clases.
El nuevo objeto classList nos provee a los desarrolladores métodos para agregar, remover y conmutar (toggle) clases CSS en un nodo HTML (tal cual lo hacemos con jQuery). Este objeto, que se añade a cada nodo dentro del DOM, también nos permite chequear si un nodo tiene o no una clase determinada.
Ejemplos de las nuevas funciones
Agregar clase CSS:
1 | unDiv.classList.add('unaClase'); |
Remover clase:
1 | unDiv.classList.remove('unaClase'); |
Conmutar (toggle) clase:
1 2 | unDiv.classList.toggle('unaClase'); //se agrega la clase unDiv.classList.toggle('unaClase'); //se remueve la clase |
En este caso, si el elemento no tiene la clase «unaClase», la misma se le agrega.
Chequear si un elemento contiene una clase CSS:
1 | unDiv.classList.contains('unaClase'); |
Esta función nos retorna verdadero o falso dependiendo de si el elemento contiene dicha clase CSS o no.
classList API en jQuery
A diferencia de los nuevos selectores de HTML5, jQuery todavía no hace uso de esta nueva API ni en su última versión estable (1.6.4), ni en su última versión beta (1.7.2b)
Soporte en navegadores
En cuanto a navegadores de escritorio, las últimas versiones de Chrome, Firefox, Opera y Safari soportan esta API. Todavía se desconoce si Internet Explorer 10 soportará esta API.
Por el lado de los móviles, esta funcionalidad es soportada en Android (desde su versión 3.0), en la versión 11.1 de Opera Mobile y desde ahora en Safari del nuevo iOS 5!
Donate To Address
Donate Via Wallets- Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
Please Add coin wallet address in plugin settings panel
3 comentarios para “La API classList de HTML5 vs jQuery”
Dejar un comentario
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
[…] que classList es una funcionalidad relativamente nueva de HTML5, no funciona en los navegadores más viejos, pero esto no debería preocuparnos ya que existe una […]
Parece que si es soportado por IE10:
https://developer.mozilla.org/en-US/docs/DOM/element.classList#Browser_compatibility
Saludos!
[…] que classList es una funcionalidad relativamente nueva de HTML5, no funciona en los navegadores más viejos, pero esto no debería preocuparnos ya que existe una […]