Come ottenere l'elemento in base al nome della classe

Question

Desidero sapere se esiste un modo per la funzione getElementByClassName("classname").innerHTML o qualcosa equivalente a getElementById("ClassName").innerHTML.

Answer 1

Nel nome della funzione manca uno s. getElementsByTagName restituisce un insieme di elementi, di elementi, che è necessario iterare:

var elements = document.getElementsByClassName("classname"); 

for (var i = 0; i < elements.length; i++) { 
    elements[i].innerHTML = 'foo'; 
} 

IE8 e di seguito non supportano getElementsByClassName, quindi dovrete trovare un polyfill o utilizzare querySelectorAll (IE8).

Answer 2

È possibile farlo usando jQuery

$('.className').html(); 

http://api.jquery.com/html/

Answer 3

Se tou utilizzare jQuery si può ottenere, come si farebbe in un selettore CSS così:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 

poi ...

$('.classname').each(function() { 
    // get html 
    $(this).html(); 
    // set html 
    $(this).html('something'); 
}); 

Nota che hai anche un modo conveniente per gestire innerHTML.

Answer 4

vi consiglio di utilizzare jQuery, dove è possibile utilizzare i CSS direttamente selettori (come .yourclass) per trovare tutti gli elementi di una data classe:

$('.yourclass').doWhatYouWant(); 

Se si preferisce non utilizzare JQuery, è possibile utilizzare plain Javascript:

document.getElementsByClassName('my-fancy-class') 

Ma attenzione con il problema di incompatibilità IE8. Come alternativa (più lento, ma si può costruire selettori CSS più complesse) è possibile utilizzare:

document.querySelector('.cssSelector') 

che restituirà un elemento rispondere al vostro selettore CSS, o

document.querySelectorAll('.cssSelector') 

che restituirà più elementi invece.