Skip to main content
Commonmark migration
Origen Enlace

#jQuery

jQuery

#Javascript puro (moderno)

Javascript puro (moderno)

#Javascript puro (menos moderno)

Javascript puro (menos moderno)

#jQuery

#Javascript puro (moderno)

#Javascript puro (menos moderno)

jQuery

Javascript puro (moderno)

Javascript puro (menos moderno)

se eliminaron 13 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

En jQuery puedes usar un selector de elemento, en este caso $( "a""body a" ). Esto seleccionará todos los elementos con la etiqueta a, que es la que se usa para los links dentro del body. Luego puedes recorrer cada elemento para modificarlo o leer cualquiera de sus propiedades.

$( "a""body 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>
var allLinks = document.querySelectorAll('a''body 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>
var allLinks = document.body.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>

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

En jQuery puedes usar un selector de elemento, en este caso $( "body a" ). Esto seleccionará todos los elementos con la etiqueta a dentro del body. Luego puedes recorrer cada elemento para modificarlo o leer cualquiera de sus propiedades.

$("body 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>
var allLinks = document.querySelectorAll('body 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>
var allLinks = document.body.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>
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

#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.