Restituisce un array di tutti gli elementi figli che hanno tutti i nomi di classe specificati. Quando viene richiamato l'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 i nomi di classe forniti.
Sintassi
var elementi = document.getElementsByClassName(nomi); // oppure: var elementi = rootElement.getElementsByClassName(nomi);
- elements è un'attiva
HTMLCollectiondegli elementi trovati. - nomi è una stringa che rappresenta l'elenco di nomi di classi da abbinare; i nomi delle classi sono separati 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
Ottieni tutti gli elementi che hanno una come classe 'test':
document.getElementsByClassName('test')
Ottieni tutti gli elementi che hanno entrambe le classi 'rosso' e 'test':
document.getElementsByClassName('red test')
Ottieni 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')
Ottieni 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 una classe di 'test':
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
return testElement.nodeName === 'DIV';
});
Ottieni 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 il browser
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 4 | IE Full support 9 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown