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 HTMLCollection degli 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Specificazioni

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev
Ultima modifica di: IsibisiDev,