La proprietà document.scripts di Javascript
La proprietà document.scripts in Javascript restituisce una raccolta (HTMLCollection) di tutti gli elementi <script> presenti nel documento.
var scripts = document.scripts;
Questa raccolta include sia gli script inline definiti direttamente nel documento HTML, sia quelli esterni caricati da file.
Il risultato è un oggetto simile a un array che mi permette di accedere ai singoli script utilizzando un indice numerico, esattamente come farei con un array.
La proprietà document.scripts è utile per vedere quanti script ci sono nel documento e da dove provengono. Può anche modificare gli script dinamicamente. Anche se non è comune, potrei usare JavaScript per manipolare gli elementi `<script>`, ad esempio cambiando l'attributo `src` per caricare uno script diverso.
Esempio pratico
Prendo come esempio questo documento HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Document Scripts Example</title>
<script src="script1.js"></script>
<script>
console.log('Script inline');
</script>
<script src="script2.js"></script>
</head>
<body>
<h1>Ciao, questo è un esempio di document.scripts!</h1>
<script>
console.log('Un altro script inline');
</script>
</body>
</html>
In questo documento HTML ci sono quattro script.
Ora, aggiungo un altro script alla fine del documento per esplorare le informazioni contenute nella proprietà `document.scripts`:
<script>
// Ottengo la raccolta di tutti gli script
var scripts = document.scripts;
// Visualizzo il numero di script nel documento
console.log('Numero di script:', scripts.length);
// Itero attraverso tutti gli script e mostro alcune informazioni
for (var i = 0; i < scripts.length; i++) {
console.log('Script ' + (i + 1) + ':', scripts[i].src || 'Inline script');
}
</script>
Quest'ultimo script conta il numero degli script nel documento tramite l'attributo length.
Poi itera tra gli script ed elenca quali sono gli script interni (inline) ed esterni.
Il risultato in output è il seguente:
Numero di script: 5
Script 1: script1.js
Script 2: Inline script
Script 3: script2.js
Script 4: Inline script
Script 5: Inline script
Da notare che trova "5" scripts anziché 4 perché conta anche se stesso.
Questo è solo un esempio giusto per iniziare. Le possibilità di utilizzo sono molto più ampie. Ad esempio potrei usare l'attributo 'document.scripts[0].text;' per visualizzare il codice del primo script.
E così via.
