htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

La API classList de HTML5 vs jQuery

La API <em>classList</em>  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!

Comparte conocimiento:
Tweet about this on Twitter0Share on LinkedIn1Share on Facebook0Share on Google+0
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

3 comentarios para “La API classList de HTML5 vs jQuery”

  1. […] 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 […]

  2. […] 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 […]

Dejar un comentario