Document.getElementsByClassName()

Il metodo getElementsByClassName dell'interfaccia Document restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto document, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare 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 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 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getElementsByClassNameChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Specifiche