--- title: Document.getElementsByClassName() slug: Web/API/Document/getElementsByClassName translation_of: Web/API/Document/getElementsByClassName ---

Il metodo getElementsByClassName dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.

Sintassi

var elementi = document.getElementsByClassName(nomi); // oppure:
var elementi = rootElement.getElementsByClassName(nomi);

elements è una {{domxref("HTMLCollection")}} dinamica degli elementi trovati.
nomi è una stringa che rappresenta l'elenco di nomi di classi da abbinare; le classi sono separate da spazi bianchi
getElementsByClassName può essere chiamato su qualsiasi elemento, non solo sul documento. L'elemento su cui è chiamato verrà utilizzato come radice della ricerca.

Esempi

Ottenere tutti gli elementi che hanno una come classe 'test':

document.getElementsByClassName('test')

Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':

document.getElementsByClassName('red test')

Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':

document.getElementById('main').getElementsByClassName('test')

Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:

document.getElementsByClassName('test')[0]

Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la HTMLCollection come il valore this. Qui troveremo tutti gli elementi div che hanno come classe 'test':

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

Ottenere il primo elemento la cui classe è 'test'

Questo è il metodo di operazione più comunemente usato.

<html>
<body>
    <div id="parent-id">
        <p>hello world 1</p>
        <p class="test">hello world 2</p>
        <p>hello world 3</p>
        <p>hello world 4</p>
    </div>

    <script>
        var parentDOM = document.getElementById("parent-id");

        var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo
        console.log(testTarget); //<p class="test">hello world 2</p>
    </script>
</body>
</html>

Compatibilità con i browser

Specifiche

W3C: getElementsByClassName