getElementsByClassName

JScode

JavaScript ha ido mejorando con el tiempo, y especialmente en la marco HTML5, una de esas mejoras es el método getElementsByClassName(NombreClase). Desde hace años los desarrolladores contamos con getElementById para recuperar elementos, pero siempre con la limitante de obtener únicamente un solo elemento, mientras que con getElementsByClassName podemos recuperar una colección que contiene todos elementos que utilizan la clase o clases seleccionadas.

Esto supone una gran ventaja en términos de cantidad de código, ya que el método puede seleccionar varios elemento de una sola vez pero también discriminar implicitamente algunos. El comportamiento de getElementsByClassName  es básicamente buscar en todo el documento a todos los elementos que cumplan con el criterio de búsqueda  que se proporcionó como parámetro.

Por ejemplo, digamos que queremos seleccionar todos los elementos que usan la clase prueba:

document.getElementsByClassName('prueba');

También se pueden seleccionar múltiples clases, si deseara obtener los elementos que usan una clase jovenes y una clase adultos lo lograría utilizando solo la siguiente línea de código

document.getElementsByClassName('jovenes adultos');

Hagamos la cosas más interesantes,  le propongo una página con diferentes párrafos (<p>) pero solo aquellos que utilizan la clase contenido deben ser seleccionados para cambiar el tamaño de la fuente que usan. Para lograr tal objetivo podría hacer uso del siguiente código JavaScript:

//se asignan todos los botones que permiten cambiar el tamaño de la fuente a variables
var BotonFontSize1 = document.getElementById("btnFontSize1");
var BotonFontSize2 = document.getElementById("btnFontSize2");
var BotonFontSize3 = document.getElementById("btnFontSize3");
var BotonFontSize4 = document.getElementById("btnFontSize4");

//se vincula el evento click a cada botón
BotonFontSize1.addEventListener('click', function(){
   CambiaTamano(10);
}, false);
BotonFontSize2.addEventListener('click', function(){
   CambiaTamano(12);
}, false);
BotonFontSize3.addEventListener('click', function(){
   CambiaTamano(14);
}, false);
BotonFontSize4.addEventListener('click', function(){
   CambiaTamano(17);
}, false);

//funcion que utiliza getElementsByClassName para buscar todos los elementos que usan la clase contenido y asignar el tamaño de fuente especificado según el botón presionado
function CambiaTamano(size) {
   contenidos = document.getElementsByClassName("contenido");
   //alert(contenidos.length);
   contenidos[0].style.fontSize = size + "px";
   contenidos[1].style.fontSize = size + "px";
}

Para ver en funcionamiento este código puede visitar el siguiente enlace: ejemplo getElementsByClassName (botón “+” para ver el código completo incluyendo HTML y CSS).

Sin duda esta mejora en JavaScript nos ahorra mucho código, si usted tiene algo de experiencia con JavaScript se dará cuenta de que existen varias maneras creativas de utilizar getElementsByClassName, experimente y sin duda encontrará muchas de ellas. Si desea ver la especificación oficial al respecto visite:  HTML5 – getElementsByClassName.

Algunos enlaces de relacionados:

Document.getElementsByClassName()    (Mozilla.org)

HTML 5.1 2nd Edition

HTML DOM getElementsByClassName() Method  (W3Schools)

Algunos libros de interés:

Algunos buenos libros que pueden ser de su interés:

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Leave Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: