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()
(en-US) 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
BCD tables only load in the browser