Uno de los selectores más famosos en JQuery es aquel que nos permite recuperar N elementos a través del nombre de una clase que tengan asignada:
var elements = $('.info');Por otro lado, también es muy común hacer uso de esta librería con el objetivo de comprobar (hasClass) y manipular clases de un elemento, añadiendo y quitando las mismas a través addClass de removeClass respectivamente.
var elements = $('.info');
elements.addClass('warn');
elements.removeClass('info');
En HTML 5, aunque ambas especificaciones estén en Working Draft, ya disponemos de estas habilidades de forma nativa, aunque no funcionan exactamente igual:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.info {
background-color: paleturquoise;
}
.warn {
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li id="a" class="info warn">This is a info/warning</li>
<li id="b" class="warn info">This is a info/warning</li>
<li id="c" class="info">Info! info!</li>
<li id="d" class="warn">Warning! warning!</li>
<li id="e" class="info">Information</li>
</ul>
<script>
window.onload = function () {
var warnings = document.getElementsByClassName('warn');
console.log(warnings);
var warnInfo = document.getElementsByClassName('warn info');
console.log(warnInfo);
var e = document.getElementById('e');
e.classList.add('warn');
console.log(e.classList);
if (e.classList.contains('info'))
e.classList.remove('info');
console.log(e.classList);
}
</script>
</body>
</html>
En el código anterior, se han definido dos clases CSS y un listado, donde hemos asignado dichas clases e incluso en algunos elementos hemos establecido ambas.
En el script, se obtienen a través de getElementsByClassName todos los elementos que contengan la clase warn, lo cual nos devuelve un NodeList.
Este mismo método se puede utilizar para recuperar todos los elementos que contengan las clases warn e info ¡pero cuidado! En este caso no actúa como JQuery, ya que el orden no es relevante en la búsqueda y, en este caso, nos devolverá tanto el elemento a (class=»info warn»), como el b (class=»warn info»).
Por otro lado, tenemos la manipulación de clases de un elemento con classList, donde podemos hacer uso de add, contains o remove como aparece en el ejemplo. También podríamos hacer uso de toggle para añadir o eliminar una clase según corresponda (de la misma forma que usamos .toggleClass() en JQuery), length para conocer el número de clases asociadas, etcétera (Más información).
A día de hoy estas características están disponibles en los navegadores más comunes.
Can I Use classList?
Can I Use getElementsByClassName?
Espero que sea de utilidad.
¡Saludos!