Etiqueta: htlml5

  • CSS3 / Desarrollo / Development / Diseño Web / HTML5 / JavaScript / Programación / Programming

    Utilice getElementsByClassName
    flashw

    JScode

    JavaScript y DOM han ido mejorando con el tiempo, y especialmente en la marco de HTML5, una de esas mejoras es el método getElementsByClassName(NombreClase) el cual nos permite obtener varios elementos al mismo tiempo. Desde hace años los desarrolladores contamos con getElementById con la limitante de obtener únicamente un solo elemento; más recientemente QuerySelector y QuerySelectorAll los cuales son métodos poderosos y flexibles. Sienodo así ¿porque deberiamos usar getElementsByClassName?

    Los casos donde pude preferir utilizar getElementsByClassName son aquellos donde usted tiene un árbol de elementos extenso y/o complejo, si ese es el caso y usted desea modificar elementos independientemente de su posición y sin usar selector complejos, entonces usted puede recuperar esa colección con todos elementos que utilizan la clase o clases seleccionadas. Cabe destacar que bajo ese escenario las pruebas de benchmarking tienden a favorecer a getElementsByClassName sobre QuerySelector y QuerySelectorAll.

    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 sin usar selectors elaborados. 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:

    10 CSS Selectors Que Hay Que Tener En Mente

    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:

    No Comment