elemento actual de getElementsByClassName

Question

Consideremos un simple caso de JS

document.getElementsByClassName('test')[0].onclick=function(){ 
document.getElementsByClassName('test')[0].innerHTML = 'New Text'; 
} 

¿Cómo puedo extender el código de trabajo en general para todos los elementos con class="test". Me refiero a hacer clic en el elemento y reemplazar su contenido. De hecho, necesitamos obtener el número de nodo (provisto dentro del corchete) del evento click.

Estoy tratando de comprender mejor javascript en códigos discretos, no es un método práctico como jQuery.

Answer 1

Sólo iterar sobre ellos:

var elements = document.getElementsByClassName('test'); 

for (var i = 0; i < elements.length; i++) { 
    elements[i].addEventListener('click', (function(i) { 
     return function() { 
      this.innerHTML = 'New Text'; 
     }; 
    })(i), false); 
}​ 

utilicé (function(i) { return function() { ... }; })(i) en lugar de solo function() { ... } porque si lápiz para usar i en la devolución de llamada, el valor de i será elements.length - 1 cuando lo llame. Para solucionarlo, debe sombrear i y hacerlo pasar esencialmente por valor.

Answer 2

var all = document.getElementsByClassName('test'); 
for(var i=0;i<all.length;i++) 
    all[i].onclick=function(){ 
     this.innerHTML = 'New Text'; 
    } 

Pero es más recomendable utilizar addEventListener (o attachEvent, en el IE/Algunas versiones de Opera, supongo):

var all = document.getElementsByClassName('test'); 
for(var i=0;i<all.length;i++) 
    all[i].addEventListener('click',function(){//If you're gonna use attachEvent, use 'onclick' instead of 'click' 
     this.innerHTML = 'New Text'; 
    }}); 

Answer 3

sólo tiene que utilizar this dentro de la función. this será el elemento sobre el cual se lanzará el evento.

(function() { 
    var elms = document.getElementsByClassName("test"), 
     l = elms.length, i; 
    for(i=0; i<l; i++) { 
     (function(i) { 
      elms[i].onclick = function() { 
       this.innerHTML = "New Text"; 
      }; 
     })(i); 
    } 
})(); 

Es un poco más complicado que jQuery:

$(".test").click(function() { 
    $(this).html("New Text"); 
}); 

Pero será mucho más rápido y sin los excesos que jQuery añade;)