En esta práctica de JavaScript he puesto en práctica el acceso a los enlaces de una página HTML.
El usuario pulsará en una serie de párrafos y les mostrará las direcciones url y el texto de los enlaces que haya en el documento. También cambiará uno de los enlaces del documento por otro nuevo.
Para poder comprender el código de esta práctica es muy importante conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos. Como ayuda puedes echarle un vistazo al siguiente enlace:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="caja"></div>
<p><a href="https://www.google.es">Google</a></p>
<p><a href="https://espanol.yahoo.com/">Yahoo</a></p>
<p><a href="https://www.microsoft.com/es-es/">Microsoft</a></p>
<p><a href="https://www.wikipedia.org/">Wikipedia</a></p>
<p id="parrafoUrl">Ver direcciones URL.</p>
<p id="parrafoTexto">Ver texto de los enlaces.</p>
<p id="parrafoYoutube">Cambiar cuarto enlace a YouTube</p>
</body>
</html>Código CSS
#caja {
width: 400px;
height: 200px;
border: 1px solid black;
float: right;
font-family: arial;
}
p {
font-size: 1em;
font-family: arial;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("parrafoUrl").addEventListener("click", function(){mostrar(0);}, false);
document.getElementById("parrafoTexto").addEventListener("click", function(){mostrar(1)}, false);
document.getElementById("parrafoYoutube").addEventListener("click", cambiar, false);
}
function mostrar(num) {
let caja = document.getElementById("caja");
let enlaces = document.links;
let texto = "";
if(num == 0){
for(let i = 0; i < enlaces.length; i++) {
texto += enlaces[i] + "<br><br>";
}
}else{
for(let i = 0; i < enlaces.length; i++) {
texto += enlaces[i].innerHTML + "<br><br>";
}
}
caja.innerHTML = texto;
}
function cambiar() {
let direccion = "https://www.youtube.com";
document.links[3].innerHTML = "YouTube";
document.links[3].href = direccion;
mostrar(1);
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.