La proprietà document.links in Javascript
In Javascript la proprietà "links" è una proprietà dell'oggetto document che mi permette di accedere ai link presenti in un documento HTML.
document.links
E' particolarmente utile quando voglio modificare o analizzare i link della pagina in modi specifici.
Questa proprietà restituisce una collezione array-like, un oggetto simile ad un array che non è un array vero e proprio), contenente tutti i collegamenti ipertestuali presenti nella pagina.
Nota. Quando si lavora con `document.links`, è importante ricordarsi che ritorna un live HTMLCollection. Questo significa che se il DOM cambia (ad esempio, se un link viene aggiunto o rimosso), la collezione `document.links` rifletterà automaticamente questi cambiamenti. Questa è una caratteristica molto potente e utile ma può anche portare a risultati inaspettati. Occorre fare attenzione.
Un esempio pratico
Leggere i link in una pagina
Questo codice legge tutti i link presenti nella pagina
<html>
<body>
<p><a href="/javascript.htm">HTML Tutorial</a></p>
<p><a href="/css.htm">CSS Tutorial</a></p>
<script>
const links = document.links;
for (let i = 0; i < links.length; i++) {
document.write(links[i].href);
}
</script>
</body>
</html>
Questo codice cicla attraverso tutti i link della pagina e ne stampa gli URL nella console.
Per semplicità nei prossimi esempi indico solo il codice javascript.
Contare i link
Posso usarlo per sapere quanti link ci sono in una pagina:
<script>
const totalLinks = document.links.length;
console.log(`Ci sono ${totalLinks} link in questa pagina.`);
</script>
Filtrare i link per dominio
Posso anche utilizzarlo per trovare tutti i link che puntano a un certo dominio:
<script>
const specificDomainLinks = Array.from(document.links).filter(link => link.href.includes("andreaminini.it"));
document.write(`Ci sono ${specificDomainLinks.length} link che puntano a questo sito`);
</script>
Cambiare il colore dei link
Posso anche cambiare il colore di tutti i link in una pagina:
<script>
for (let link of document.links) {
link.style.color = 'red';
}
</script>
Questo codice imposta il colore di tutti i link a rosso.
Aggiungere un evento clic a tutti i link
Supponiamo che voglia aggiungere un avviso ogni volta che viene cliccato un link:
<script>
Array.from(document.links).forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Impedisce il comportamento di default del link
alert(`Hai cliccato su ${this.href}`);
});
</script>
Questo codice aggancia un gestore di eventi di tipo 'click' a ogni link.
Quando un link viene cliccato, impedisce il comportamento di default del browser (che sarebbe di seguire il link) e mostra un messaggio di avviso.
E così via.
