#jQuery
En jQuery puedes usar un selector de elemento, en este caso $( "a" )
. Esto seleccionará todos los elementos con la etiqueta a
, que es la que se usa para los links. Luego puedes recorrer cada elemento para modificarlo o leer cualquiera de sus propiedades.
$( "a" ).each(function( link ) {
console.log(`ID: ${$( this ).prop("id")} URL: ${$( this ).prop("href")}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
<p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
<p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
</div>
<footer>
<p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
<p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
</footer>
</body>
#Javascript puro (moderno)
En navegadores modernos puedes lograrlo simplemente con querySelectorAll
. Por ejemplo haciendo esto tendrías en allLinks
un array con todos los links del DOM y todas sus propiedades:
var allLinks = document.querySelectorAll('a');
Luego puedes recorrerlo con un bucle para leerlos, modificarlos o lo que quieras.
var allLinks = document.querySelectorAll('a');
allLinks.forEach(function(link) {
console.log(`ID: ${link.id} URL: ${link.href}`);
});
<body>
<div>
<p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
<p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
</div>
<footer>
<p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
<p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
</footer>
</body>
#Javascript puro (menos moderno)
En navegadores más viejos, puedes reemplazar querySelectorAll
por getElementsByTagName
, sólo que aquí no te devuelve los elementos como nodos en sí mismos:
var allLinks = document.getElementsByTagName("a");
for(var i = 0; i< allLinks.length; i++){
console.log(`ID: ${allLinks[i].id} URL: ${allLinks[i].href}`);
}
<body>
<div>
<p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
<p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
</div>
<footer>
<p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
<p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
</footer>
</body>
Puedes cualquiera de las opciones y adaptarla al listener o función donde quieras implementarlo.